如何在 Angular 2+ 中使用 ngFor 显示组件答案

【问题标题】：How to Display Components using ngFor in angular 2+如何在 Angular 2+ 中使用 ngFor 显示组件
【发布时间】：2019-05-02 10:03:39
【问题描述】：

我正在使用 Angular 6。就我而言，我有一个选项卡列表，这些选项卡取决于多个用户操作。现在，所有选项卡都包含组件作为内容的一部分。目前，我必须手动添加选项卡的名称并检查效率不高的条件。是否可以使用 *ngFor 来显示组件？这是我当前场景的示例：

<app-tab1 *ngIf='showTabsArray == 1'></app-tab1>
<app-tab2 *ngIf='showTabsArray == 2'></app-tab2>

【问题讨论】：

你能再分享一点代码吗？使用*ngFor 描述您想要实现的目标。示例：需要遍历tabsArray（选项卡列表），但仅在（某些条件）时显示。如果在问题中分享的额外上下文很少，会更容易。
当您尝试使用 *ngFor 创建组件时发生了什么错误？

标签： angular angular6

【解决方案1】：

ngFor 可以选择生成计数器，如下所示：

<div *ngFor="let item of array; let i = index">

然后，将您的组件类名放入一个数组中。使用ngComponentOutlet 显示它们，如下所示：

<div *ngFor="let componentClass of componentClassArray; let i = index">

  // Only one structural directive is allowed per tag, hence we wrap the following
  // ng-container with ngComponentOutlet property in one more conditional div

  <div *ngIf="showTabsArray == i">
    <ng-container *ngComponentOutlet="componentClass" ></ng-container>
  </div>

</div>

除了使用let i = index 从ngFor 获取索引值之外，您还可以从中获取一些更有趣的值。

... let i = index // iteration number / integer
... let c = count // total number of items in object / integer
... let e = even  // true or false / boolean
... let o = odd   // true or false / boolean
... let f = first // true or false / boolean
... let l = last  // true or false / boolean

【讨论】：