如何在两个ngFor内获得有序索引？

Question

这是我的演示代码，我在评论中解释了我的目标：

product.component.html

<div *ngFor="let item of items1">
  <div *ngFor="let item of items2">     
      <input type="text" value="{{data[getNumber()]}}"> //I want to get data[0] till data[6]
  </div>
</div>

product.component.ts

export class ProductComponent{

  itens1=["A","B","C","D"];
  itens2=["X","Y","Z"];
  data=[1,2,3,4,5,6,7];

  number=0;

  getNumber(){
    return this.number++;
  }

}

这些是我得到的错误：

我希望能很好地解释我的问题。

Answer 1

问题是每次调用getNumber()时，它都会返回一个与之前不同的值。

每当Angular2评估在更改检测期间将value设置为什么时，它就会发生变化，它永远不会解决。 Angular2认为这是一个错误。 See this answer for a more complete explanation

以下代码按您的意图运行。请注意，getNumber现在是幂等的，它为相同的输入提供相同的结果。输入是使用语法let i = index从循环中获取的。

@Component({
    selector: 'product',
    template: `
<div *ngFor="let item of items1; let i = index">
  <div *ngFor="let item of items2; let j = index">
      <input type="text" value="{{data[getNumber(i, j)]}}">
  </div>
</div>`
})
export class ProductComponent {
    items1 = ['A', 'B', 'C', 'D'];
    items2 = ['X', 'Y', 'Z'];
    data = [1, 2, 3, 4, 5, 6, 7];

    getNumber(i: number, j: number) {
        return i * this.items2.length + j;
    }
}