Question

我想知道是否可以使用ngFor渲染组件，例如this link中的代码

总结一下，我想做这样的事情

<div *ngFor="let item of tabs" class="tab-content" id="myTabContent">
  <div
    class="tab-pane fade show active"
    [id]="item.tab"
    role="tabpanel"
    aria-labelledby="{{ item.tab }}-tab"
  >
    <app-{{item.tab}}></app-{{item.tab}}>
  </div>
</div>

假设我已经创建了组件，并且tabs变量是这样的：

 tabs = [
        { title: "Impresoras", tab: "printers" },
        { title: "Mapa de Ataques", tab: "attacks" },
        { title: "Alerta de Vuelos", tab: "flights" }
    ];

Answer 1

假设（根据您的代码示例）每个标签都有自定义组件（例如<app-printers>，<app-attacks>，<app-flights>），则可以使用*ngSwitch结构指令以实现您的目标：

<div *ngFor="let item of tabs" class="tab-content" id="myTabContent" [ngSwitch]="item.tab">
  <div
    class="tab-pane fade show active"
    [id]="item.tab"
    role="tabpanel"
    aria-labelledby="{{ item.tab }}-tab"
  >
    <app-printers *ngSwitchCase="printers"></app-printers>
    <app-attacks *ngSwitchCase="attacks"></app-attacks>
    <app-flights *ngSwitchCase="flights"></app-flights>
  </div>
</div>

当然，您也可以使用*ngIf：

<div *ngFor="let item of tabs" class="tab-content" id="myTabContent">
  <div
    class="tab-pane fade show active"
    [id]="item.tab"
    role="tabpanel"
    aria-labelledby="{{ item.tab }}-tab"
  >
    <app-printers *ngIf="item.tab === 'printers'"></app-printers>
    <app-attacks *ngIf=item.tab === 'attacks'"></app-attacks>
    <app-flights *ngIf="item.tab === 'flights'"></app-flights>
  </div>
</div>

希望有帮助！

Answer 2

ngFor语句正确，但是这里的问题是标记

<app-{{item.tab}}></app-{{item.tab}}>

应用程序项点击可能是带有Input装饰器的通用组件喜欢：

<app-generic-tap [itemTap]="item.tap"><app-generic-tap>

特别是@Input和@Output装饰器中的Angular文档。

使用* ng渲染Angular html标签

2 个答案: