Angular4 * ngForどのようにループネストされた配列をそのキー名

Question

を使用する私は、次のデータサンプルがあります。私は2つのネストされたループを持っていますが、私は何をしたい、あるをループすることが可能です今の

をこのよう*ngFor="let key of myArray.functionalArea"

などの特定のキー、私の現在のコードは次のとおりです。

<span *ngFor="let jobByField of countOfJobsByFields"> 
    <span *ngFor="let jobByWorkType of countOfJobsByFields?.workType"> 
    <li (click)="searchByWorkType(jobByWorkType?._id)"><a>{{ jobByWorkType?._id }}<span class="badge badge-default pull-right item-plus-icon-custom-style">{{ jobByWorkType.total }}</span></a></li> 
</span> 

と、第2の鍵のための私はヘクタールこのVEの：彼らは私のhtmlで別の要素であるため、私は両方に同じ<span *ngFor="let jobByField of countOfJobsByFields">を使用することはできません

<span *ngFor="let jobByField of countOfJobsByFields"> 
    <span *ngFor="let jobByFunctionalArea of countOfJobsByFields?.functionalArea"> 
    <li (click)="searchByFunctionalArea(jobByFunctionalArea?._id)"><a>{{ jobByWorkType?._id }}<span class="badge badge-default pull-right item-plus-icon-custom-style">{{ jobByFunctionalArea.total }}</span></a></li> 
</span> 

注意。

Answer 1

はい、次のことができます。

<span *ngFor="let jobByField of countOfJobsByFields"> 
    <ng-template *ngIf='jobByField.workType'> 
     <span *ngFor="let jobByWorkType of jobByField.workType"> 
      {{jobByWorkType._id}} 
     </span> 
    </ng-template> 

    <ng-template *ngIf='jobByField.functionalArea'> 
     <span *ngFor="let jobByWorkType of jobByField.functionalArea"> 
      {{jobByWorkType._id}} 
     </span> 
    </ng-template> 
</span> 

Answer 2

次のコードを使用

<span *ngFor="let jobByField of countOfJobsByFields"> 
<div *ngIf='jobByField.workType'> 
    <span *ngFor="let jobByWorkType of jobByField.workType"> 
     {{jobByWorkType._id}} 
    </span> 
</div> 

<div *ngIf='jobByField.functionalArea'> 
    <span *ngFor="let jobByWorkType of jobByField.functionalArea"> 
     {{jobByWorkType._id}} 
    </span> 
</div> 

JSON： -

countOfJobsByFields = [ 
     { 
     workType: [{'_id':'Part Time', 'total':10}, {'_id': 'Full Time', 'total': 20}] 
     }, 
     { 
     functionalArea: [{'_id':'IT', 'total':10}, {'_id': 'Management', 'total': 20}] 
     } 

    ] 

Plunker

Answer 3

NG-コンテナで次のコードを使用し、それはあなたが配列から、各functionalAreaを反復処理したい* ngIf

<span *ngFor="let jobByField of countOfJobsByFields"> 
    <ng-container *ngIf='jobByField.workType'> 
     <span *ngFor="let jobByWorkType of jobByField.workType"> 
      {{jobByWorkType._id}} 
     </span> 
    </ng-container> 

    <ng-container *ngIf='jobByField.functionalArea'> 
     <span *ngFor="let jobByWorkType of jobByField.functionalArea"> 
      {{jobByWorkType._id}} 
     </span> 
    </ng-container> 
</span>`