0

我刚开始做一个 Angular 项目。在下面的代码中，我想使用ngFor和ngModel迭代一个数组并将项目值作为文本区域的默认值。我有一个数组中有两个值的示例，所有文本区域总是被其中一个覆盖，而不是在网站上显示不同的值。有谁知道这可能是什么原因？

      <mat-form-field *ngFor = "let item of model.answers; let index = index;" class="example-full-width" appearance="fill">
        <mat-label>Cluster Answer</mat-label>
        <textarea
          matInput
          id="{{item['id']}}"
          rows="7"
          placeholder="Cluster answer"
          [(ngModel)]="model.answers[index]['answer']"
          name="clusterAnswer"
          formControlName="clusterAnswer"
        ></textarea>
        <mat-hint>Define the cluster answer to be suggested</mat-hint>
      </mat-form-field>
4

3 回答 3

0

您已经拥有 ngModel，因此无需指定 formControlName，不推荐将 [(ngModel)] 与 formControlName 一起使用

    <mat-form-field *ngFor = "let item of model.answers; let index = index;" class="example-full-width" appearance="fill">
            <mat-label>Cluster Answer</mat-label>
            <textarea
            matInput
            [id]="item['id']"
            rows="7"
            placeholder="Cluster answer"
            [(ngModel)]="model.answer"
            ></textarea>
            <mat-hint>Define the cluster answer to be suggested</mat-hint>
        </mat-form-field>
于 2020-11-24T10:25:03.720 回答
0

您必须在 html 中的 ts non 中定义表单构建器中的值：

exampe.formBuilder{
test:[defaultValue]
}
于 2020-11-24T08:46:14.920 回答
0

您需要为每个单独的迭代提供不同的 name 属性值，因为 ngModel 值使用 name 属性的值将具有提供的名称的新控件连接到表单。

在您的情况下，甚至不需要使用两种数据绑定（盒子中的香蕉 [(ngModel)]），因为您已经在表单本身内部拥有了表单的状态，因此您可以使用 [ngModel] 来绑定如果有一个值，并且每当您想要获取新值时，您都可以使用它来从您的视图中获取表单（使用模板变量@ViewChild(NgForm) form: NgFrom名称查询它可能会更好。它看起来像where is您的模板变量。还可以查看 View Child Decorator）或在表单的 ngSubmit 事件中，您可以使用模板变量提供表单的值。.<form #f="ngForm">f<form #f="ngForm" (ngSubmit)="submitHandler(f.value)">

我不建议使用双向数据绑定，因为我们将相同的值存储在两个不同的位置：

  • 我们拥有的每个单独的 ngModel 控件的状态
  • 在你的组件的状态中。

formControlName 指令也来自 Reactive-Forms，在一个表单中混合两种类型的表单并不好。

<mat-form-field *ngFor="let item of model.answers; let i = index;" class="example-full-width" appearance="fill">
  <mat-label>Cluster Answer</mat-label>
    <textarea
       matInput
       [id]="item['id']"
       rows="7"
       placeholder="Cluster answer"
       [ngModel]="model?.answers?[i]?['answer']"
       [name]="'clusterAnswer' + i"
    ></textarea>
  <mat-hint>Define the cluster answer to be suggested</mat-hint>
</mat-form-field>
于 2020-11-25T08:47:08.527 回答