Как зацикливаться с несколькими * ngFor с разными div - Angular 5 - PullRequest
Новая
       5

Как зацикливаться с несколькими * ngFor с разными div - Angular 5

0 голосов
/ 24 сентября 2018

У меня есть ответ с этой иерархией json (контент -> категории -> элементы), контент содержит объект категорий, а каждая категория содержит объект элементов.Итак, я попробовал это: 

<div *ngFor="let content of data">
    <span>{{content.name}}</span>
    <div *ngFor="let category of content.categories">
        <span>.....</span>
    </div>
</div>
<div *ngFor="let item of category.items">
    <span>{{item.type}}</span> //this item is undefined because it is out of category looping div
</div>

Ответы [ 3 ]

0 голосов
/ 24 сентября 2018

Область действия *ngFor объекта находится внутри закрывающего тега, а не за его пределами, поэтому для достижения этого вы можете использовать ng-template

, который вы можете сделать следующим образом: 

<ng-template let-content ngFor [ngForOf]="data">

   <span>{{content.name}}</span>
   <ng-template let-category ngFor [ngForOf]="content.categories">
      <span>{{category.name}}</span>

      <div *ngFor="let item of category.items">
        <span>{{item.name}}</span>
      </div>
    </ng-template>

</ng-template>

и .ts

data = [{
     categories: [{
       name: 'xyz',
        items: [{
          name: 'item1'
        }]
     }]
   }];
0 голосов
/ 24 сентября 2018

На основании комментария поста в @Teun я думаю, что вы хотите: 

<div *ngFor="let content of data">
  <span>{{content.name}}</span>
  <div *ngFor="let category of content.categories">
    <span (click)="selectedCategory = category">.....</span>
  </div>
</div>
<div *ngIf="selectedCategory !== undefined">
  <div *ngFor="let item of selectedCategory">
    <span>{{item.type}}</span>
  </div>
</div>
0 голосов
/ 24 сентября 2018

Поместите цикл for элементов также внутри div, проходя по категориям.Если вы хотите, чтобы этот div находился вне категории, то вам также нужно создать больше циклов. 

<div *ngFor="let content of data">
    <span>{{content.name}}</span>
    <div *ngFor="let category of content.categories">
        <span>.....</span>    
         <div *ngFor="let item of category.items">
               <span>{{item.type}}</span> //this item is undefined because it is out of category looping div
         </div>
    </div>
</div>

Категории вне других циклов: 

<div *ngFor="let content of data">
  <span>{{content.name}}</span>
  <div *ngFor="let category of content.categories">
    <span>.....</span>
  </div>
</div>
<div *ngFor="let content of data">
  <div *ngFor="let category of content.categories">
    <div *ngFor="let item of category.items">
      <span>{{item.type}}</span>
    </div>
  </div>
</div>
...