angular 迭代数组或显示单个元素的模板

Question

一些自定义组件是 angular 7 应用程序的一部分。以下模式在子组件期望单个值或数组的组件中很常见。根据标志，组件呈现所需的布局。以下是示例：

<ng-container *ngIf="!arrayFlag">
    <app-some-component ... >
        ...
    </app-some-component>
</ng-container>
<ng-container *ngIf="arrayFlag">
  <app-some-component ...
    *ngFor="let field of fields; let i = index; trackBy:trackByFn">
        ...
  </app-some-component>
</ng-container>

我们能否简化这种模式，使组件的内容不需要写两次，一次为数组，一次为单个值。例如

<ng-container ... >
  <app-some-component ... >
        ...
  </app-some-component>
</ng-container>

此致

Answer 1

如果您的组件 "dumb" 像这样（它们不包含任何逻辑，您可以使用模板：

<ng-template #child let-arr>
  <child-component *ngFor="let i of arr"></child-component>
</ng-template>

<ng-container *ngTemplateOutlet="child; context: { arr: flag ? [0] : myArray }"></ng-container>

编辑做的更简单：

<app-some-component 
  *ngFor="let field of (flag ? fields : [0]); let i = index; trackBy:trackByFn">
</app-some-component>

angular 迭代数组或显示单个元素的模板

angular template to iterate over array or show single element

angular-directive

angular