it-swarm.com.ru

Angular 2 условное ngFor

Я пытаюсь очистить мой шаблон кода. У меня есть следующее:

<ul>
  <li *ngIf="condition" *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
  <li *ngIf="!condition" *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
  </li>
</ul>

Есть ли способ условно выбрать array1 или array2 для итерации с использованием *ngIf или что-то еще, чтобы мне не пришлось повторять так много шаблонного кода? Это всего лишь пример; мой фактический <li> содержит гораздо больше контента, поэтому я действительно не хочу повторяться. Спасибо!

7
7ball
  <li *ngFor="let a of (condition ? array1 : array2)">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
  </li>
28
Matej Maloča

Используйте тег шаблона с [ngIf] вне цикла ngFor.

<ul>
  <template [ngIf]="condition">
   <li *ngFor="let a of array1">
    <p>{{a.firstname}}</p>
    <p>{{a.lastname}}</p>
   </li>
  </template>
  <template [ngIf]="!condition">
   <li *ngFor="let b of array2">
    <p>{{b.firstname}}</p>
    <p>{{b.lastname}}</p>
   </li>
  </template>
</ul>

Также читайте о синтаксисе шаблона здесь: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#star-template

0
Peter Salomonsen

Мы можем скрыть элемент, используя свойство отображения начальной загрузки, основываясь на условии.

<li [ngClass]="{'d-none': condition}" *ngFor="let a of array1">
 <p>{{a.firstname}}</p>
 <p>{{a.lastname}}</p>
</li>
0
mahesh

Вы можете использовать ng-container, который не распознается DOM, поэтому будет использоваться только для условия. Смотрите пример ниже:

 <tr *ngFor="let company of companies">
        <ng-container *ngIf="company.tradingRegion == 1">
            <td>{{ company.name }}</td>
            <td>{{ company.mseCode }}</td>
         </ng-container>
  </tr>

Код выше будет: `

Показать список всех компаний, где торговаяRegion == 1

`

0
Mwizak

Вы не можете иметь и *ngFor, и *ngIf в одном и том же элементе. Вы можете создать элемент внутри <li> с помощью *ngFor. Подобно:

<li *ngIf="condition">
    <ul>
        <li *ngFor="let a of array1">

Или используйте условный код внутри *ngFor. Как это:

<li *ngFor="let a of (condition?array1:array2)">

Или вы можете использовать шаблон, как Питер Саломонсен Инструктаж.

0
nick zoum