默认情况下选中复选框角材料

Question

我正在尝试使用 Angular Material 复选框，并将其默认设置为选中，但显示为未选中，有什么问题？

<mat-checkbox class = "example-margin" [(ngModel)] = obj.impresora> 
     <label>Printer</label> 
</mat-checkbox>

obj.impresora 属性是布尔值

Answer 1

您可以使用 ngModel 或 [checked] 属性进行设置。 ngModel 绑定属性应设置为“true”：

1.

  <mat-checkbox class = "example-margin" [(ngModel)] = "myModel"> 
    <label>Printer </label> 
  </mat-checkbox>

2.

<mat-checkbox [checked]= "myModel" class = "example-margin" > 
    <label>Printer </label> 
</mat-checkbox>

3.

<mat-checkbox [ngModel]="myModel" class="example-margin">
    <label>Printer </label> 
</mat-checkbox>

演示

Answer 2

这在 Angular 7 中对我有用

// in component.ts
checked: boolean = true;

changeValue(value) {
    this.checked = !value;
}

// in component.html
<mat-checkbox value="checked" (click)="changeValue(checked)" color="primary">
   some Label
</mat-checkbox>

我希望帮助某人...问候。 如果有人有一些最简单的，请告诉我

Answer 3

根据您采用的方法，有多种方法可以实现这一点。 对于反应式方法，您可以将默认值传递给 FormControl 的构造函数（从 @angular/forms 导入）

this.randomForm = new FormGroup({
      'amateur': new FormControl(false),
});

是的，您可以像FormControl(this.booleanVariable)一样发送变量名，而不是 true 或 false 值

在模板驱动的方法中，您可以像这样使用 1 路绑定[ngModel]="this.booleanVariable"或 2 路绑定[(ngModel)]="this.booleanVariable"

<mat-checkbox
     name="controlName"
     [(ngModel)]="booleanVariable">
     {{col.title}}
</mat-checkbox>

您还可以使用 angular material 提供的 checked 指令并以类似方式绑定

Answer 4

选择的答案确实有效，但是我想发表评论说在 html 标签上有 'ngModel' 会导致选中的复选框未设置为 true。

当您尝试使用 checked 属性进行绑定时会发生这种情况。 IE

<mat-checkbox [checked]='var' ngModel name='some_name'></mat-checkbox>

然后在你的 app.component.ts 文件中

var = true;

不管用。

TLDR：如果您通过 [checked] 属性设置检查，请删除 ngModel

    <mat-checkbox [checked]='var' name='some_name'></mat-checkbox>

Answer 5

您需要确保 component.ts 中的checked属性为真

export class CheckboxComponent implements OnInit {
 checked = true;
}

Answer 6

确保您的组件上有此代码：

export class Component {
  checked = true;
}

Answer 7

如果您使用的是反应式表单，您可以将其设置为默认值，如下所示：

在表单模型中，将值设置为 false。 所以如果它被检查它的值将是真否则假

let form = this.formBuilder.group({
    is_known: [false]
})

//在HTML中

 <mat-checkbox matInput formControlName="is_known">Known</mat-checkbox>

Answer 8

在 HTML 中设置：

    <div class="modal-body " [formGroup]="Form">
        <div class="">
            <mat-checkbox formControlName="a" [disabled]="true"> Display 1</mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="b"  [disabled]="true">  Display 2 </mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="c"  [disabled]="true">  Display 3 </mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="d"  [disabled]="true">  Display 4</mat-checkbox>
        </div>
        <div class="">
            <mat-checkbox formControlName="e"  [disabled]="true"> Display 5 </mat-checkbox>
        </div>
    </div>

Ts 文件中的更改

this.Form = this.formBuilder.group({
a: false,
b: false,
c: false,
d: false,
e: false,
});

Ur 业务逻辑中的条件验证

if(true){
this.Form.patch(a: true);
}

Answer 9

要使用 ngModel 进行检查，请在“ngModel”和“value”之间进行合并，例如：

 <mat-checkbox [(ngModel)]="myVariable"  value="1" >Subscribe</mat-checkbox>

其中，myVariable = 1

问候

Answer 10

// in component.ts
checked: boolean = true;
indeterminate:boolean = false;
disabled:boolean = false;
label:string;

onCheck() {
    this.label = this.checked?'ON':'OFF';
}

// in component.html`enter code here`
<mat-checkbox class="example-margin" [color]="primary" [(ngModel)]="checked" [(indeterminate)]="indeterminate" [labelPosition]="after" [disabled]="disabled" (change)="onCheck()">
                    {{label}}
                  </mat-checkbox>

上面的代码应该可以正常工作。 Mat 复选框允许您使其选中/取消选中、禁用、设置不确定状态、对状态进行一些操作等。请参阅API以获取更多详细信息。

Answer 11

选项 1：设置从模板中选中的复选框：

<mat-checkbox checked="true"> I accept </mat-checkbox>

---

选项 2：动态设置值。

在component.html文件中

<mat-checkbox [checked]="isChecked"> I accept </mat-checkbox>

在component.ts 文件中

 isChecked:boolean;
 ngOnInit(): void {
  this.isChecked = true;  
 }

Answer 12

您可以使用

<mat-checkbox [attr.checked] = "myCondition ? 'checked' : null">

如果checked 属性设置为null，它会从html 标签中删除

或者你可以使用 Vega 的 anwser，它也应该可以工作（如果你不想将它与 ngModel 链接，我的完成是很有用的）