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

這應該工作