PrimeNG

Question

我正在尝试在 Angular8 上实现一个 p-checkbox，其 true 和 false 值作为字符串而不是布尔值。所以我在下面尝试了这段代码：

<p-checkbox [(ngModel)]="mycheckbox" name="mycheckbox" inputId="mycheckbox" 
[trueValue]="'CB_OUI'" [falseValue]="'CB_NON'"></p-checkbox>

但我总是收到此错误消息：

Can't bind to 'trueValue' since it isn't a known property of 'p-checkbox'.

但我不明白为什么，因为在 doc 中有 trueValue 和 falseValue...

如果有人有想法，谢谢你的帮助。

Answer 1

请确保您的导入正确无误。在您的 app.module.ts 文件中：

import {CheckboxModule} from 'primeng/checkbox';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    CheckboxModule
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Answer 2

仅供参考，[trueValue] 和 [falseValue] 输入属性仅支持 PrimeNG v12.2.0。由于这些属性在以前的版本中没有找到。

解决方案

解决方案 1：对于 PrimeNG v12.2.0

要么你必须安装最新版本的 PrimeNG。（注意：注意与当前 Angular 版本的兼容性）。

方案二：PrimeNG v12.2.0之前的版本

创建另一个变量（存储字符串值）并应用 onChange 事件以根据 myCheckbox.

更新变量

确保在ngOnInit()中调用change()来初始化变量。

.component.ts

mycheckboxWithStringValue: string = '';

ngOnInit() {
  // Init mycheckboxWithStringValue
  this.change();
}

change() {
  this.mycheckboxWithStringValue = this.mycheckbox ? 'CB_OUI' : 'CB_NON';
}

.component.html

<p-checkbox
  [(ngModel)]="mycheckbox"
  (onChange)="change()"
  name="mycheckbox"
  inputId="mycheckbox"
  binary="true"
></p-checkbox>

Sample Demo on StackBlitz

PrimeNG - 在 p-checkbox 上使用 trueValue/falseValue

PrimeNG - Use trueValue/falseValue on p-checkbox

angular

typescript

checkbox

angular8

解决方案