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

发布时间：2020-12-17 07:19:52 所属栏目：安全来源：网络整理

导读：我试图在两个ngFor循环中显示两个不同的ng-content. 但正如 this回答中所述,Angular无法多次投影ng-content. 我尝试了this解决方案,但这不允许我多次投影我的内容,只是根据ngIf条件在不同的地方显示它. 这是我的实际代码：示例父组件(使用app-table的任何组

我试图在两个ngFor循环中显示两个不同的ng-content.
但正如 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>

在您的情况下,最好的选择是使用ngTemplateOutlet转换ng-template,如：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!