将 ngFor 和 ngModel 与自定义模型一起使用的问题

Question

带有 ngFor 和 trackBy 的 ngModel：trackByIndex 没有按预期工作。 这是我的 html 模板：

<form (ngSubmit)="createTest()" #testForm="ngForm">
            <div class="card" *ngFor="let question of questionsArr; let i=index;">
                <div class="card-header">
                    <input type="text" placeholder="Question {{i+1}}" name="question{{i}}"  class="form-control" [(ngModel)]="questionsArr[i].text">
                </div>
                <div class="card-block" *ngFor="let option of fillArray(oC); let u=index">
                    <input type="text" class="form-control" placeholder="Option {{u+1}}" name="option" id="option">
                </div>
            </div>
    </form>
The below works well. But in the above, [(ngModel)]="questionsArr[i].text" seems to bind to the same thing regardless.

<label *ngFor="let item of items; let i=index; trackBy:trackByIndex">
    {{items[i]}}
    <input type="number" [(ngModel)]="items[i]">
</label>.

我做了一些测试，并使用了一个对象数组和下面的对象数组，它按预期工作：

 testarr = [
  {
    a: "a",
    b: "b"
  },
  {
    a: "aa",
    b:"bb"
  }
  ];

做一些测试，它奏效了。将 ngModel 更改为 questionsArr[i] 也会为每次迭代生成一个单独的对象。问题似乎是[(ngModel)]="questionsArr[i].text" 不能正常工作。

questionsArr 只是一个数组：'new QuestionModel("Question Text", this.s.name, "",null);'

这是我的组件的相关部分：

optionsArr: OptionModel[];
    questionsArr: QuestionModel[];

    blankQM: QuestionModel;
    blankOM: OptionModel;
    formTest: TestModel;

    items: number[] = [1,2,3,4,5];

  constructor(
    private api: ApiService
  ) { }

  ngOnInit() {
    this.blankQM = new QuestionModel("Question Text", this.s.name, "",null);
    this.blankOM = new OptionModel("Option Text");
    this.formTest = new TestModel("", null);
    this._getQuestionArrays();
    this._getOptionArrays();
  }

  _getQuestionArrays(){
    // this.fillArray(this.qC);
    this.questionsArr = Array(this.qC).fill(this.blankQM);
  }

  _getOptionArrays(){
    // this.fillArray(this.oC);
    this.optionsArr = Array(this.oC * this.qC).fill(this.blankOM);
    }

  fillArray(qty){
    return Array(qty).fill(0).map((e,i)=> i+ 1);
  }

  goBack(){
    this.back.emit();
  }

  createTest(){
    console.log(this.questionsArr);
    // console.log(this.optionsArr);

    console.log(this.testarr);
  }


  trackByIndex(index: number, value: QuestionModel){
    return index;
  }

  testarr = [
  {
    a: "a",
    b: "b"
  },
  {
    a: "aa",
    b:"bb"
  }
  ];
} 

根据我收集到的信息，我将使用trackBy，它会按预期工作，我不只是知道为什么我无法将ngModel 绑定到正确的questionsArr[i].text 访问文本questionsArr 的正确索引的属性作为访问 questionsArrenter code here 工作正常。

Answer 1

原来是

Array.fill

我确实是问题所在。将我的代码更改为使用 for 循环来填充数组。