угловой шаблон для перебора массива или отображения одного элемента - PullRequest
Новая
       9

угловой шаблон для перебора массива или отображения одного элемента

0 голосов
/ 04 июня 2019

Некоторые пользовательские компоненты являются частью приложения 7 angular. Следующий шаблон распространен в компонентах, где дочерние компоненты ожидают либо одно значение, либо массив. В зависимости от флага компонент отображает требуемый макет. Ниже приведен пример: 

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

Привет

1 Ответ

1 голос
/ 04 июня 2019

Если ваши компоненты "тупые", как это (они не содержат никакой логики, вы можете использовать шаблоны: 

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