如何循环遍历数组？答案

【问题标题】：How to loop through an array of arrays?如何循环遍历数组？
【发布时间】：2018-05-15 14:15:16
【问题描述】：

我正在尝试在选择下拉列表中显示来自 json 数组的数据。

<select class="form-control-custom" [(ngModel)]="selected"  placeholder="Filter Category By">
    <option>Get Countries By Currency Name</option>
    <option *ngFor="let currency of allData;">{{currency[0].name}}</option>          
</select>

我已经编写了一个逻辑来获取我在选择下拉列表中使用的 allData 字段中的所有货币数组。数据如下所示：

所以我无法使用单个 ngFor 循环在另一个数组中迭代数组，而且我必须仅在选择下拉列表中显示数据。

这里是json数据的实际api： https://restcountries.eu/rest/v2/all

我正在尝试在这个 json 数据中循环货币数组

非常感谢任何形式的帮助。

提前致谢。

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用 <ng-container> 和嵌套 ngFor

 <select class="form-control-custom" [(ngModel)]="selected"  placeholder="Filter Category By">
    <option>Get Countries By Currency Name</option>
    <ng-container *ngFor="let currency of allData;">
      <option *ngFor="let currenObj of currency.currencies;"> {{currenObj.name}} </option>
    </ng-container>    
</select>

DEMO STACKBLITZ

【讨论】：

【解决方案2】：

以下是有关如何解决您所追求的问题的一些想法。我喜欢这个为类似选择的组件创建嵌套项的示例 https://codepen.io/sathomas/pen/VpJeEo

这个问题可能有点复杂。为了简单起见，我相信您可以使用变量绑定来创建子选择选项。创建父->子关系。

<select [(ngModel)]="selectedCountry">
    <option *ngFor="country of AllData" [ngValue]='country'>{{country.name}}</option>
</select>
<select id='child' [(ngModel)]="selectedCurrency">
    <option *ngfor="currency of SelectedCountry.currencies" [ngValue]="currency.code'>{{currency.name}}</option>
</select>

您还可以使用county.currency 作为第一个选择的ngValue，并在第二个选择中快捷地完整引用它。但是，对于完整的国家/地区，您可以在单独的选择元素中选择其他属性数组值。

注意：我写的所有代码都没有测试语法，所以请原谅那里的任何错误。

【讨论】：