html - 如何在 html Angular 4 中使用两个 ngFor？

Question

在我响应服务器请求的 Angular 4 项目中，我得到了两个不同的数组，在模板中我想同时使用它们。 Controller 代码是:

this.contractService.getOwnerContract()
  .subscribe(
    res => {
     this.contracts = res.contracts;
     this.users= res.users;
  })

在 html 中我想使用两个 ngFor 来使用契约(Contract)和用户属性:

<div class="col-md-12 property-list-box" *ngFor="let contct of contracts ; let usr of users">
  <div>{{contct.id}}</div>
  <div>{{usr.id}}</div>
</div>

但是我写的这段 html 代码不起作用。什么是最好的解决方案？ 感谢您的帮助。

Answer 1

这两个数组的元素数量总是相同吗？如果是这样，您可以迭代其中之一，并跟踪索引

<div class="col-md-12 property-list-box" *ngFor="let contract of contracts ; let i = index">
  <div>{{contracts[i].id}}</div>
  <div>{{users[i].id}}</div>
</div>

如果它们并不总是具有相同数量的元素，您将需要 2 个 ngFor 指令