我想在我的 Angular 模板中嵌套一个循环而不嵌套元素。
例如伪代码:
component.ts
let titles: string[];
let content: { title: string, text: string }[];
getContentByTitle(t: string) {
return this.content.filter(c => c.title === t);
}
template.html
<div myDirective *ngFor="let title of titles">
{{title}}
<div myDirective *ngFor="content of getContentByTitle(title)">
{{content.text}}
</div>
</div>
但这嵌套了我的 div。我正在尝试创建一个平面列表,每个:
<div myDirective>
{{title}}
</div>
<div myDirective>
{{content.text}}
</div>
<div myDirective>
{{content.text}}
</div>
<div myDirective>
{{title}}
</div>
<div myDirective>
{{content.text}}
</div>
etc...
这可能吗?
最佳答案
在这种情况下,您可以使用 ng-container
,你会写一个嵌套的代码,但输出不会被嵌套。
<ng-container *ngFor="let title of titles">
<div myDirective>
{{title}}
</div>
<ng-container *ngFor="text of getContentByTitle(title)">
<div myDirective>
{{text}}
</div>
</ng-container>
</ng-container>
从 Angular doc ng-container :
Angular <ng-container>
是一个不会干扰样式或布局的分组元素,因为 Angular 不会将它放在 DOM 中。
希望对您有所帮助!
关于javascript - 没有嵌套元素的 Angular4 模板中的嵌套循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49736947/