Question

在我的angular 4项目中，响应服务器的请求，我得到了两个不同的数组，而在模板中我想同时使用它们。控制器代码为：

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

在html中，我想使用两个ngFor来使用合同和用户属性：

<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指令

Answer 2

您需要合并两个数组并存储在变量中，然后在模板的ngFor中使用该变量。

或者您可以使用管道将两个数组“合并”为一个数组，然后可以对其进行迭代这是一个示例：

@Pipe({
  name: 'concat'
})
export class ConcatPipe {
  transform(arr1, arr2) {
    var arr = [];
    arr1.forEach((elt, i) => {
      arr.push({ state: elt, name: arr2[i] });
    });
  }
}

并以这种方式使用它：

<div class="col-md-12 property-list-box"*ngFor="let contract of contracts | merge:users"  >
  {{contract.id}} 
</div>

Answer 3

将index用于下一个数组。

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

查看更多：https://angular.io/api/common/NgForOf#local-variables

Answer 4

如果两个数组的大小相等，则可以简单地使用其中一个数组，并使用另一个索引。例如：

如果数组的大小不相等，则必须以其他方式进行操作，以便可以在单个列表（如自定义数组）中进行迭代。

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

4 个答案: