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

Question

我想ng-content在两个ngFor循环中显示两个不同的东西.但正如本回答所述,Angular不能多次投影ng-content.

我试过这个解决方案,但这不允许我多次投影我的内容,只是根据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通过使用ngTemplateOutletlike 来进行转换:

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

APP-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示例