Angular4 *ngFor如何使用其键名循环嵌套数组答案

【问题标题】：Angular4 *ngFor how to loop nested array using its key nameAngular4 *ngFor如何使用其键名循环嵌套数组
【发布时间】：2017-11-13 05:52:35
【问题描述】：

我有以下数据样本：

现在我有两个嵌套循环，但我想做的是，是否可以循环通过特定键，例如*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>

对于第二把钥匙，我有这个：

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

请注意，我不能对两者使用相同的 <span *ngFor="let jobByField of countOfJobsByFields">，因为它们是我的 html 中的单独元素。

【问题讨论】：

你想从数组中迭代每个功能区吗？
如果这对你有帮助，请告诉我，plnkr.co/edit/KTJbPUzrfUftKhcAU29b?p=preview
@rish 更新了我的问题。
@rish plunker 是我已经做过的事情。
@rish 现在检查一下，plnkr.co/edit/cxze8ymG0VyZKEmMrqQK?p=preview

标签： angular ngfor

【解决方案1】：

使用以下代码

 <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

【讨论】：

感谢您的努力，但我已经做了同样的事情，有两个循环。

【解决方案2】：

是的，你可以：

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

【讨论】：

countOfJobsByFields 是一个长列表数组，我不想从0, 1, etc... 使用，因为如果数组项的顺序发生变化，它需要更改我的代码。
@jones，请检查更新的答案，我认为这可以帮助你

【解决方案3】：

在 ng-container 中使用以下代码，可以避免与 *ngIf 一起使用的额外 div

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

【讨论】：