0

带有 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为 justquestionsArr[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访问正确索引的 text 属性，questionsArr因为访问 questionsArrenter code here工作正常.

4

1 回答 1

0

结果是

数组填充

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

于 2017-10-04T23:55:44.020 回答