Angular 6中ngFor中的Textarea输入问题

Question

I have a list of questions inside in one Array.So am using ngFor to display the questions.To answer question i have textarea control which is also ngFor. The problem is if i trying to answer one question by typing the same text appears in all answer textarea.How to fix this?

Html:

    <li class="media media-sm" *ngFor="let question of test.Questions">
    <h5 class="media-heading">{{ question.Description }}? </h5>
    <div class="input-group">
        <textarea rows="3" name="answer" [(ngModel)]="postAnswer.Description" class="form-control bg-silver" placeholder="Answer Here..."
        ngModel #answer="ngModel"></textarea>
        <span class="input-group-append">
    <button class="btn btn-primary" [disabled]="!postAnswer.Description" type="submit" (click)="addNewAnswer(question.QuestionID)">
    <i class="fa fa-paper-plane"></i></button>
    </span>
  </div>
    </li>

Typescript:

async addNewAnswer(questionId: number) {
      this.postAnswer.QuestionID = questionId;
let response = <HttpResponse<Object>>await this.answerService.postAnswer(this.postAnswer);
}

Models:

 export class Test {
    property 1: string;
    Questions: Question[];
    }

    export class Question {
    property 1: string;
    QuestionId: number;
    Answer: Answer;
    }

    export class Answer{
    property 1: string;
    QuestionId: number;
    Description: string;
    }

When i post answer the answer added to corresponding question but the problem is typing issue. I tried all the solutions don't mark it as duplicate question the solution for the related questions is not fixing my problem.

Answer 1

I have created a sample code for your example. Please check below link. https://stackblitz.com/edit/angular-cahh4l

On clicking submit, the answer is logged in console. Please let me know if you have any queries. Hope this helps.

Answer 2

You bind all data into: [(ngModel)]=postAnswer.Description so text appears in all textareas. You should add some kind of filter with ID of textarea, or use array to keep all textareas, like [(ngModel)]=postAnswer[id].Description ;

The simplest working example: https://stackblitz.com/edit/angular-yyvqvg?embed=1&file=src/app/app.component.html

For this idea you need: in your component.ts

public tempVal = {};
public addNewAnswer(id, value) {
   console.log('ID', id);
   console.log("VAL", value);
}

and in your component.html

<li class="media media-sm" *ngFor="let question of test; let i = index;">
    <textarea rows="3" name="answer" [(ngModel)]="tempVal[i]" class="form-control bg-silver" placeholder="Answer Here..."
        ngModel #answer="ngModel"></textarea>
    <button class="btn btn-primary" type="submit" (click)="addNewAnswer(question, tempVal[i])">BUTTON</button>
</li>

Answer 3

Define postAnswers array

postAnswers: []

Then you need to map the postAnswers array to question array in that way that each postAnswer contains description and questionID. Do this after getting your test data.

postAnswers = test.Questions.map(q => return {
     QuestionID : q.QuestionID,
     description: ''
})

After that you need to bind one textarea to one postAnswer. Also logic in button element should be different. Now disabled property should be binded to specific postAnswer element from the array and addNewAnswer method needs index instead of questionID .

<li class="media media-sm" *ngFor="let question of test.Questions;let i = index">
    <h5 class="media-heading">{{ question.Description }}? </h5>
    <div class="input-group">
        <textarea rows="3" name="answer" [(ngModel)]="postAnswers[i].Description" class="form-control bg-silver" placeholder="Answer Here..."
        ngModel #answer="ngModel"></textarea>
        <span class="input-group-append">
    <button class="btn btn-primary" [disabled]="!postAnswers[i].Description" type="submit" (click)="addNewAnswer(i)">
    <i class="fa fa-paper-plane"></i></button>
    </span>
  </div>
    </li>

And finally modify your addNewAnswer method to this:

async addNewAnswer(index: number) {
let response = <HttpResponse<Object>>await this.answerService.postAnswer(this.postAnswer[index]);
}

This should work