Angular8中如何动态添加一对text input和textarea？

Question

下面的 html 片段来自我们的 angular 页面，用户应该在该页面中介绍问题及其相应的答案（类似于问答之类的东西）。

 <mat-card>
           <button mat-stroked-button color="primary" style="margin-right: 20px;">
               Add a new Q & A pair
            </button>
            </mat-card>
            <div *ngFor="let qna of interview.qnas">
                <mat-card id="{{qna.id}}" style="margin-bottom: 25px;">
                    <mat-form-field>
                        <input matInput type="text" class="form-control" placeholder="Interview question" required [(ngModel)]="qna.question" name="question">
                    </mat-form-field> 
                    <mat-form-field>
                        <textarea matInput rows="5" class="form-control" placeholder="Ideal answer from the talent" [(ngModel)]="qna.answer" name="answer"></textarea>
                    </mat-form-field>
                    <button mat-stroked-button color="warn">
                        Remove this
                    </button>
                </mat-card> 
            </div>

正如您在 HTML 中看到的那样，那里有两个按钮，第一个按钮应该让用户添加一对新的和，第二个按钮应该删除一对。我可能会想出一个删除对的解决方案，但我不太确定如何在用户单击它时即时添加新的问答对。另外，请考虑我们也有双向绑定。

Answer 1

试试这个：

 <mat-card>
           <button mat-stroked-button color="primary" style="margin-right: 20px;">
               Add a new Q & A pair
            </button>
            </mat-card>
            <div *ngFor="let qna of interview.qnas">
                <mat-card id="{{qna.id}}" style="margin-bottom: 25px;">
                    <mat-form-field>
                        <input matInput type="text" class="form-control" placeholder="Interview question" required value="{{qna.question}}" name="question">
                    </mat-form-field> 
                    <mat-form-field>
                        <textarea matInput rows="5" class="form-control" placeholder="Ideal answer from the talent"  value="{{qna.answer}}" name="answer"></textarea>
                    </mat-form-field>
                    <button mat-stroked-button color="warn">
                        Remove this
                    </button>
                </mat-card> 
            </div>

Answer 2

<mat-card>
    <button mat-stroked-button color="primary" style="margin-right: 20px;"
            (click)="addQnApair()">
        Add a new Q & A pair
    </button>
</mat-card>
<div *ngFor="let qna of interview.qnas; let i= index">
    <mat-card id="{{qna.id}}" style="margin-bottom: 25px;">
        <mat-form-field>
            <input matInput type="text" class="form-control"
                   placeholder="Interview question" required [(ngModel)]="qna.question"
                   name="question">
        </mat-form-field>
        <mat-form-field>
                        <textarea matInput rows="5" class="form-control"
                                  placeholder="Ideal answer from the talent" [(ngModel)]="qna.answer"
                                  name="answer"></textarea>
        </mat-form-field>
        <button mat-stroked-button color="warn"
                (click)="removeQnApair(i)">
            Remove this
        </button>
    </mat-card> 
</div>

在ts文件中

removeQnApair(i) {
    this.interview.qnas.splice(i,1);
     }

addQnApair(){
   this.interview.qnas.push({id: this.interview.qnas.length+1,
                question: '',
                answer: ''});
   }

Angular8中如何动态添加一对text input和textarea？

How to dynamically add a pair of text input and textarea in Angular 8?

angular

typescript

angular-material

angular-components