我有一系列动态生成的复选框。根据数据的不同,一些复选框应该被预先选中。ngModel似乎出于某种原因没有完成这一点。
模板:
<div *ngFor="let value of values">
<p-checkbox [(ngModel)]="existingValue"
[value]="value.value"
name="value-row">
</p-checkbox>
</div>
组件:
...
existingValue!: string | undefined;
getValues() {
this.apiService.getValues()
.pipe(
take(1),
tap(() => // logic to determine if getValues() response has an
// existing value that matches possible values
// (checkboxes)
).subscribe(noop)
}
在tap()
中,我的逻辑是确定某个value属性是否存在。为了举例起见,我缩短了逻辑。如果它确实存在,我将this.existingValue
设置为等于该属性。这些属性与复选框的值相同,但当设置this.existingValue
时,复选框实际上并没有被选中。
在应该预先选中该框的情况下,[(ngModel)]
似乎没有捕获this.existingValue
的新值
2条答案
按热度按时间0wi1tuuw1#
您需要一个唯一的名称,请为
*ngFor="let value of values; let i = index"
添加一个索引,并在名称[name]="'value_row_' + i"
中使用该索引以使其唯一。该名称用于将值绑定到表单模型,如果它们不唯一,则会发生冲突。我也不认为你应该用减号,我会坚持用下划线,我会在我的电脑上用StackBlitz测试它。
这是一个相当大的错误,你是双向绑定每个复选框到同一个值,当任何复选框更新它将更新existingValue将更新所有复选框,因为他们都绑定到它。
qzwqbdag2#
您希望在
this.existingValue
的复选框中显示选定的值,因此其类型应为值列表:this.existingValue : string []
,并从getValues()
方法中的返回值填充,另一件事是你应该添加一个标签来显示值: