我有多个textareas(使用ngFor循环并在其中添加带有textareas的新div)。我需要的是每个文本区域都具有单独的ngModel,并且我不想将其直接绑定到dataArray中对象的属性-例如:
[(ngModel)]='data.note' or [(ngModel)]='data.feedback' .
这可行,但是我在dataArray中没有反馈属性,因此它不适用于第二个textarea。
例如,在我当前的实现中,一个文本区域中的更改反映在所有其他文本区域中。我尝试使用索引方法,但出现错误:
ERROR TypeError: Cannot read property '1' of undefined
<div *ngFor="let data of dataArray; let index=index;trackBy:trackByIndex;">
<div class="card-body">
<form class="form">
<div class="form-body">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<textarea name="note" [(ngModel)]='selectedNote' class="form-control"
rows="2"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea name="feedback" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</div>
</div>
</div>
</div>
</form>
</div>
使用当前代码,如果我在第一个名称为“ note”的文本区域中添加一些文本,则更改将反映在所有名称为“ note”的文本区域中。如前所述,尝试添加
[(ngModel)]='selectedFeedback[index]' but i am getting error.
还尝试为textareas指定不同的名称:
<textarea name="note{{index}}" [(ngModel)]='dataArray[index]' rows="2"></textarea> OR
<textarea name="note{{index}}" [(ngModel)]='selectedNote' rows="2"></textarea>
但是更改再次反映了每个文本区域。
答案 0 :(得分:1)
ngModel与name属性绑定。因此,如果要使用多个文本区域,请尝试使用其他名称属性。您可以像-
那样进行迭代<ng-container *ngIf="let data of dataArray; index as i">
<textarea name="feedback_{{i}}" [(ngModel)]='selectedFeedback' class="form-control" rows="4"></textarea>
</ng-container>
答案 1 :(得分:1)
您可以尝试使用任何数组,我正在使用data(n)函数返回长度为n的数组。在此示例中,仅用于迭代
<div *ngFor="let item of data(8); let i = index">
<textarea [(ngModel)]='values[i]'></textarea>
</div>
// To reflect changes
<div *ngFor="let item of data(8); let i = index">
<div>{{ values[i] }}</div>
</div>
使用TS
export class AppComponent {
values = [];
data(n) {
return Array(n);
}
}
中的工作示例