Angular 复选框和可见性答案

【问题标题】：Angular Checkboxes and VisibilityAngular 复选框和可见性
【发布时间】：2021-07-02 05:26:14
【问题描述】：

如果未在列表中选中复选框，我会尝试不显示它们。单击某个产品时，该列表会自动打开。我试图禁用复选框，但您仍然可以在列表中看到未选中的框。我怎样才能使这项工作？这是我的 HTML 代码：

<mat-checkbox class="mt-16" formControlName="IsOlfactory">
                    Koku Alan
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsMetalEffective">
                    Metal Kontrolü
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsHygroscopic">
                    Higroskopik
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsNotSwallowed">
                    Yutulmaması Gereken
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsFragrance">
                    Koku Veren
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsNotTasted">
                    Tadılmaması Gereken
                </mat-checkbox>
                <mat-checkbox class="mt-16" formControlName="IsFrigrophic">
                    Frigofrik
                </mat-checkbox>

这里是 TS 代码：

ngOnInit() {
        // Reactive Form
        this.form = this._formBuilder.group({
            IsOlfactory: new FormControl({
                value: this.data.IsOlfactory,
                disabled: true,
            }),
            IsHygroscopic: new FormControl({
                value: this.data.IsHygroscopic,
                disabled: true,
            }),
            IsMetalEffective: new FormControl({
                value: this.data.IsMetalEffective,
                disabled: true,
            }),
            IsNotSwallowed: new FormControl({
                value: this.data.IsNotSwallowed,
                disabled: true,
            }),

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

使用 *ngIf

<mat-checkbox class="mt-16" formControlName="IsOlfactory" *ngIf="form.get('IsOlfactory').value">
                    Koku Alan
                </mat-checkbox>

form 是您定义的 formGroup 名称。

注意：除非以编程方式赋予 formControl 值，否则这将始终隐藏

假设：值是布尔值（真或假）......不是字符串或整数

【讨论】：

谢谢它适用于布尔值，但是只有一个字符串值。应该使用什么？
它仍然可以工作。但是为了保持数据类型均匀，您可以使用 !!form.get('IsOlfactory').value.... add !!在前。这是你的选择。