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

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

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

如何连接两个阵列。如果我使用两个forloop，那么cities和zipcode将变成两个。有人能帮忙吗 我期待这样的输出 aaa-111 bbb-222 ccc-333 ddd-444

但我没有得到预期的结果。 我试过这个。

---

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

然后在html中使用

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

{{x.name}}-{x.num}

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

然后在html中使用

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

{{x.name}}-{x.num}
既然你已经有了索引，为什么不直接使用
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>



{{x.name}}-{{zipcode[i].num}



这是你的参考资料的更新

既然已经有了索引，为什么不直接使用
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>



{{x.name}}-{{zipcode[i].num}



这是你的参考资料的更新

为什么不能在组件中执行此操作？（打字脚本文件）这是一个很大的设计味道。不要使用并行阵列。使用单个对象数组，其中每个对象都有一个城市名称和邮政编码。这些数组来自两个不同的地方，然后使用您的TypeScript代码将它们组合成一个对象数组。组件不仅仅是一个视图。它也是一个TypeScript类，您可以在其中编写TypeScript代码。我在ts文件中也尝试了使用映射，但我不知道您尝试了什么？我同意@JBNizet。。您不应该有并行阵列为什么不能在组件中执行此操作？（打字脚本文件）这是一个很大的设计味道。不要使用并行阵列。使用单个对象数组，其中每个对象都有一个城市名称和邮政编码。这些数组来自两个不同的地方，然后使用您的TypeScript代码将它们组合成一个对象数组。组件不仅仅是一个视图。它也是一个TypeScript类，您可以在其中编写TypeScript代码。我在ts文件中也尝试了使用映射，但我不知道您尝试了什么？我同意@JBNizet。。您不应该有并行数组