Question

我正在尝试在两个ng-content循环中显示两个不同的ngFor。但正如this回答中所述，Angular不能多次预测ng-content。

我尝试了this解决方案，但这不允许我多次投影我的内容，只是根据ngIf条件在不同的地方展示。

这是我的实际代码：

示例父组件（使用app-table的任何组件）。这就是我想要做的。

<app-table [data]="myData">
  <div lineHeader let-line>
    {{line.name}}
  </div>
  <div lineContent let-element>
    {{element.name}}
  </div>
</app-table>

子组件（app-table）。在这里，我可以做任何事情，而父组件保持相同的工作方式。

<div *ngFor="let line of data">
  <ng-content select="[lineHeader]"></ng-content>
  <div *ngFor="let element of line">
    <ng-content select="[lineContent]"></ng-content>
  </div>
</div>

Answer 1

您的案例中最好的选择是使用ng-template转发ngTemplateOutlet，如：

<app-table [data]="myData">
  <ng-template #lineHeader let-line>
    <div>
     {{line.name}}
    </div>
  </ng-template>
   <ng-template #lineContent let-element>
    <div>
      {{element.name}}
    </div>
   </ng-template>
</app-table>

应用-table.component.ts

@Component({ selector: 'app-table', template: ` <div *ngFor="let line of data"> <ng-container *ngTemplateOutlet="lineHeaderTmpl, context: { $implicit: line }"></ng-container> <div *ngFor="let element of line.values"> <ng-container *ngTemplateOutlet="lineContentTmpl, context: { $implicit: element }"></ng-container> </div> </div> ` }) export class AppTableComponent { @Input() data: any; @ContentChild('lineHeader') lineHeaderTmpl: TemplateRef<any>; @ContentChild('lineContent') lineContentTmpl: TemplateRef<any>; }

<强> Stackblitz Example

如何使用Angular 4在ngFor循环中渲染多个ng-content？

1 个答案: