Angular4模板中的嵌套循环没有嵌套元素答案

【问题标题】：Nested loop in Angular4 template without nesting elementsAngular4模板中的嵌套循环没有嵌套元素
【发布时间】：2018-09-19 02:07:18
【问题描述】：

我想在我的角模板中嵌套一个循环而不嵌套元素。

例如伪代码：

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...

这可能吗？

【问题讨论】：

标签： javascript angular typescript ionic3 angular2-template

【解决方案1】：

使用 ng 容器

<div myDirective>
  <ng-container *ngFor='let o of objects'>
     {{o}}
  </ng-container>
</div>

它展开为：

<div myDirective>
  {{o}}{{o}}{{o}}{{o}}...
</div>

【讨论】：

【解决方案2】：

在这种情况下你可以使用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。

希望对你有帮助！

【讨论】：