Angular 6中ngFor中的Textarea输入问题

Question

我在一个数组中有一个问题列表。所以我正在使用ngFor显示问题。要回答问题，我有textarea控件，它也是ngFor。 问题是如果我试图通过键入相同的文本来回答一个问题出现在所有答案textarea中。如何解决此问题？

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>

打字稿：

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

楷模：

 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;
    }

当我发布答案时，答案已添加到相应的问题，但问题是键入问题。 我尝试了所有不将其标记为重复问题的解决方案，但相关问题的解决方案并未解决我的问题。

Answer 1

我为您的示例创建了示例代码。 请检查以下链接。 https://stackblitz.com/edit/angular-cahh4l

单击提交后，答案将登录到控制台。 如果您有任何疑问，请告诉我。 希望这可以帮助。

Answer 2

您将所有数据绑定到： [(ngModel)]=postAnswer.Description以便文本出现在所有textareas中。 您应该添加某种ID为textarea的过滤器，或者使用数组保留所有文本区，例如[(ngModel)]=postAnswer[id].Description ；

最简单的工作示例： https : //stackblitz.com/edit/angular-yyvqvg?embed=1&file=src/app/app.component.html

为此，您需要：在component.ts中

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

并在您的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

定义postAnswers数组

postAnswers: []

然后，您需要将postAnswers数组映射到问题数组，以使每个postAnswer都包含description和QuestionID。 获取测试数据后执行此操作。

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

之后，您需要将一个文本区域绑定到一个postAnswer。 按钮元素中的逻辑也应该不同。 现在，disabled属性应该绑定到数组中的特定postAnswer元素，并且addNewAnswer方法需要索引而不是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>

最后，将您的addNewAnswer方法修改为：

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

这应该工作