使用 *ngFor 渲染 Angular html 标签答案

【问题标题】：Using *ngFor rendering Angular html tags使用 *ngFor 渲染 Angular html 标签
【发布时间】：2019-05-08 21:58:32
【问题描述】：

我想知道是否有一种方法可以使用 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" }
    ];

【问题讨论】：

标签： angular

【解决方案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>

希望有帮助！

【讨论】：

谢谢，这正是我想要的！

【解决方案2】：

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

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

app item tap 可以是一个带有 Input 装饰器的通用组件喜欢：

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

查看 Angular 文档，尤其是 @Input 和 @Output 装饰器中的文档。

【讨论】：