javascript - 如何在两个ngFor中获取有序索引？

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

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++;
  }

}

这些是我得到的错误：



我希望已经很好地解释了我的问题。

最佳答案

问题是每次调用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;
    }
}