typescript ngModel自动选中primeng复选框

5jvtdoz2  于 2023-03-19  发布在  TypeScript
关注(0)|答案(2)|浏览(113)

我有一系列动态生成的复选框。根据数据的不同,一些复选框应该被预先选中。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的新值

0wi1tuuw

0wi1tuuw1#

您需要一个唯一的名称,请为*ngFor="let value of values; let i = index"添加一个索引,并在名称[name]="'value_row_' + i"中使用该索引以使其唯一。该名称用于将值绑定到表单模型,如果它们不唯一,则会发生冲突。
我也不认为你应该用减号,我会坚持用下划线,我会在我的电脑上用StackBlitz测试它。
这是一个相当大的错误,你是双向绑定每个复选框到同一个值,当任何复选框更新它将更新existingValue将更新所有复选框,因为他们都绑定到它。

qzwqbdag

qzwqbdag2#

您希望在this.existingValue的复选框中显示选定的值,因此其类型应为值列表:this.existingValue : string [],并从getValues()方法中的返回值填充,另一件事是你应该添加一个标签来显示值:

<label for="'value-row_' + i">{{value}}</label>

相关问题