如何在angular 2+中使用ngFor显示零部件

Question

我使用的是Angular 6。在我的例子中，我有一个选项卡列表，这些选项卡以几个用户操作为条件。现在，所有选项卡都包含了作为内容一部分的组件。目前，我必须手动添加选项卡的名称并检查条件，这是无效的。是否可以使用*ngFor来显示组件？以下是我当前场景的示例：

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

Answer 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