Angular4模板中的嵌套循環，沒有嵌套元素

Question

我想在沒有嵌套元素的角度模板中嵌套循環。

例如偽代碼：

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

這可能嗎？

Answer 1

在這種情況下，您可以使用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中。

我希望它可以幫到你！

Answer 2

使用ng-container

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

它展開為：

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