Question

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

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中，因此文本出现在所有文本区域中。您应该添加某种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]);
}

这应该有效

Angular 6中ngFor中的Textarea输入问题

3 个答案: