Angular текстовое поле не связывается при динамическом добавлении

Question

Я пытаюсь добавить ответы на вопрос динамически, нажимая кнопку Добавить опцию. Вот мой код:

Из файла html

<span (click)="addQuestionOption()" style="cursor: pointer">Add Option</span>

<div *ngFor="let itineraryQuestionOption of itineraryQuestion.ItineraryQuestionOptions; index as idx" [hidden]="questionIsTextType">
    <textarea name="answer" [(ngModel)]="itineraryQuestion.ItineraryQuestionOptions[idx].answer" rows="2" class="form-control"></textarea>
</div>

Из файла кода:

ngOnInit() {
    this.itineraryQuestion = {};
    this.itineraryQuestion.ItineraryQuestionOptions = [];
}

addQuestionOption() {
    this.itineraryQuestion.ItineraryQuestionOptions.push({
        answer: ''
    });
}

Вот что происходит:

Нажмите кнопку Добавить параметр, он добавляет новую текстовую область. Введите в него значение.

Теперь снова нажмите кнопку «Добавить параметр», добавляется новая текстовая область, но значение в предыдущем текстовом поле исчезает.

Это происходит всякий раз, когда я нажимаю кнопку «Добавить параметр».

Что я тут не так делаю?

Answer 1

Я скопировал и вставил ваш код, и он работает для меня.