如何在HTML angular5中链接两个数组

Question

我有两个数组，例如一个是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

但是我没有得到预期的结果。 我试过了 数据堆栈的链接数组

Answer 1

像这样更改您的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>

使用citys数组的索引来定位相应的邮政编码数组的元素。 但是，要执行此操作，您需要确保2个数组的长度相同，并且在两个数组中引用相同值的索引相同

查看更新的Stackblitz

要么

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

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>  

Answer 2

由于您已经有了索引，为什么不简单使用zipcode[i].num

像这样：

<div class="admin-page">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="co col-md-12">
          <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>
        </div>
      </div>
    </div>
  </div>
</div>

---

这是供您参考的更新的工作示例StackBlitz 。