默认单选按钮选择值角度材料2

Question

我正在使用角度材料2单选按钮,遵循以下文档:https://material.angular.io/components/component/radio.

我面临的问题是让单选按钮的默认选择值为No.如果您在plunker中看到:https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN ？ p = preview,您会发现没有选择任何选项.我希望默认值是No页面加载时.

Answer 1

很多傻瓜似乎对我不起作用了.这里有一个经过修改的stackblitz:

闪电战

如上所述,我们可以设置ngModel和变量:

[(ngModel)]="favoriteSeason"

并在'ts'文件中:

  favoriteSeason: string = 'Winter';

或者我们可以设置检查:

[checked]="season === 'Winter'" 

我最近发现的另一个小问题是,如果你错误地给mat-checkbox错误(重复的ID),那么它不起作用 - 你无法检查任何东西.确保您的ID是唯一的.

Answer 2

<mat-radio-button [checked]="true"</mat-radio-button>

Answer 3

您可以这样使用checked:

[checked]="data.value ==='false'" 

请注意我们正在检查使用字符串'false',而不是false,因为您的值具有值的字符串false.

Plunker

Answer 4

您可以通过[checked]属性来实现它。看到这个Plunker

Answer 5

还有另一个选项可用于[(ngModel)]初始化md-radio-group组件.

plunker 演示.

Answer 6

我喜欢使用材料单选按钮时的反应式方法。下面是一个示例，说明如何使用数据库检查特定 formControlName 的真假

对话框中的组件

<mat-radio-group formControlName="trueClient">
                <mat-radio-button class="material-radio" value="true" [checked]="data.trueClient === 'true'">True Client</mat-radio-button>
                <mat-radio-button class="material-radio" value="false" [checked]="data.lostLead === 'false'">Lost Lead</mat-radio-button>
        </mat-radio-group>

如果这是更新表单，请确保在表单构建器中设置值。下面的例子：

对话框中组件的 .ts 文件。

this.viewClient.setValue({
      trueClient: this.data.trueClient
    });

在这种情况下，我在对话框中打开数据。所以数据来自以下： component.ts 之前打开对话框。只是一个参考，以便您知道我从哪里获得数据变量来设置值。

用于打开对话框的组件。有关如何设置的更多信息，请参考材料文档中的对话框。

const dialogRef = this.dialog.open(ClientNotesComponent, {
        height: '600px',
        width: '800px',
        data: {trueClient: trueClient}
    });
 });
}