时间戳

首页 > 解决方案 > 如何在 Html angular5 中连接两个数组

angular - 如何在 Html angular5 中连接两个数组

问题描述

我有两个数组，一个是City，另一个是Zipcode

cities=[{name:"aaa"},{name:"bbb"},{name:"ccc"},{name:"ddd"}]
  zipcode=[{num:"111"},{num:"222"},{num:"333"},{num:"444"}]

如何连接两个数组。如果我使用两个forloops，那么城市和邮政编码就变成了两倍。谁能帮助我期待这样的输出 aaa-111 bbb-222 ccc-333 ddd-444

但我没有得到预期的结果。我试过这个。 数据stackblitz的链接数组

标签： angular

解决方案

像这样更改您的html

<li *ngFor="let x of cities;let i=index">
     <div class="form-group" (click)="City(x)">
        <label>{{x.name}}-{{zipcode[i].num}}</label>
     </div>              
</li>

使用城市数组的索引来定位相应的邮政编码数组的元素。但要使其正常工作，您需要确保 2 个数组具有相同的长度并且具有相同的索引来引用两个数组中的相同值

查看更新的 stackblitz

或者

您可以使用map在 ngOnInit 方法中组合 2 个数组，如下所示。

ngOnInit () {        
    this.cities.map((x:any, i) => x.num = this.zipcode[i].num);
  }

然后在html中使用

<div class="form-group" (click)="City(x)">
  <label>{{x.name}}-{{x.num}}</label>
</div>

推荐阅读