Question

我正在使用Angular6。就我而言，我有一个选项卡列表，这些列表取决于多个用户操作。现在，所有选项卡都将组件包含为内容的一部分。目前，我必须手动添加选项卡的名称并检查效率不高的条件。是否可以使用* 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>

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

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

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

1 个答案: