angular - ngModel uppdaterar inte värdet vid ändring

Jag har ngModel, inuti ngFor-loop:

<div *ngFor="let comment of comments">
   <div *ngFor="let answer of toArray(comment.answers); let j = index; trackBy: trackByIndex;">
      <textarea id="editAnswer[j]" name="editAnswer[j]" [(ngModel)]="answer.text">

      {{ answer.text }}
   </div>
</div>

I min komponent har jag två funktioner för att iterera över index och konvertera objekt till array:

  trackByIndex(index: number, obj: any): any {
    return index;
  }

  toArray(answers: object) {
    return Object.keys(answers).map(key => ({
      key,
      ...answers[key]
    }))
  }

Men när jag ändrar texten som var bunden i textarea, ändras inte ngModel.

Stackblitz-exempel: https://stackblitz.com/edit/angular-z6xatv

Svar #1

Metoden toArray verkar skapa en kopia av de ursprungliga comments.answers.text-värdena. När text-egenskapen ändras i inmatningselementen påverkar inte ändringen de ursprungliga data (konsolen i denna stackblitz visar att värdena inte delas).

Om du förenklar toArray så att det returnerar en enkel array av answers, fungerar koden (se denna stackblitz). Föremålen i arrayen delar samma text-referenser som de ursprungliga uppgifterna.

comments = [
  {
    text: 'dsddsdsd', answers: {
      FszW: { text: 'answer 1' },
      dsSce: { text: 'answer 2' }
    }
  }
]

toArray(answers: object) {
  return Object.keys(answers).map(key => answers[key]);
}

Om du behöver åtkomst till nyckeln kan du använda denna version av toArray:

toArray(answers: object) {
  return Object.keys(answers).map(key => {
    return { key: key, value: answers[key] };
  });
}

med följande mallmarkering:

<textarea name="answer_{{j}}" [(ngModel)]="answer.value.text"></textarea>
{{ answer.key }}: {{ answer.value.text }}

Som en sidonotering föreslår jag att du sätter name-egenskapen i mallen med en av följande syntaxer:

name="answer_{{j}}"
[name]="'answer_' + j"

Relaterade artiklar