Question

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

getExtensionToFactoryMap

obj.impresora属性是布尔值

Answer 1

您可以使用[checked]属性设置ngModel。 ngModel binded属性应设置为“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>

DEMO

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

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

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

<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 4

您需要确保在component.ts中 checked 属性为true。

export class CheckboxComponent implements OnInit {
 checked = true;
}

Answer 5

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

在表单模型中，将值设置为false。因此，如果检查它的值将为true，否则为false

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

//在HTML中

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

Answer 6

以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 Business逻辑中的条件验证

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

Answer 7

您可以采用多种方法来实现此目标。对于反应性方法，可以将默认值传递给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>

您还可以使用棱角材料提供的选中指令并以类似方式绑定

Answer 8

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

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

其中，myVariable = 1

问候

Answer 9

// 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 10

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

export class Component {
  checked = true;
}

Answer 11

您可以使用

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

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

或者您可以使用Vega的anwser，它也应该起作用（如果您不想将它与ngModel链接，那么我的完成可能很有用）

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

11 个答案: