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

【问题标题】：Default radio button select value angular material 2默认单选按钮选择值角度材料 2
【发布时间】：2017-05-09 11:34:38
【问题描述】：

我正在按照本文档处理 angular material 2 单选按钮：https://material.angular.io/components/component/radio。

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

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

很多 plunkrs 似乎不再为我工作了。这里有一个修改过的 stackblitz：

Blitz

如前所述，我们可以设置 ngModel 和变量：

[(ngModel)]="favoriteSeason"

在“ts”文件中：

  favoriteSeason: string = 'Winter';

或者我们可以设置勾选：

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

我最近发现的另一个小问题是，如果您错误地将 mat-checkbox 输入错误（重复的 ID），那么它就不起作用 - 您无法检查任何内容。确保您的 ID 是唯一的。

【讨论】：

【解决方案2】：

你可以使用checked，像这样：

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

请注意，我们使用字符串 'false' 而不是 false 进行检查，因为您的值具有值为 false 的字符串。

Plunker

【讨论】：

感谢您的帮助！！

【解决方案3】：

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

【讨论】：

感谢您的帮助！！

【解决方案4】：

还有另一种选择，您可以使用[(ngModel)] 用您的组件初始化md-radio-group。

plunkerdemo.

【讨论】：

请注意，如果使用[(ngModel)]，则不能再使用[checked] 属性。例如，如果您将[checked] 显式设置为false，但绑定到mat-radio-group 的组件变量的值等于此mat-radio-button 的值，则单选按钮确实会保持选中状态

【解决方案5】：

我喜欢使用材质单选按钮时的反应式方法。下面是一个示例，说明如何使用数据库检查特定 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 之前打开对话框。只是一个参考，以便您知道我从上面获取数据变量以设置值的位置。

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

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

【讨论】：

【解决方案6】：

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

【讨论】：

建议对您发布的答案添加一些描述，
这个问题是1,5年前的问题，其他几个答案已经提到[checked]的使用，并且不限于静态值，而是根据用户的实际设置值数据。这个答案没有添加任何有用的东西，当它没有描述时当然不会。
或者只是简单的 checked 没有任何 Angular 相关的东西

【解决方案7】：

HTML 文件

<mat-radio-group aria-label="Select an option" [(ngModel)]="formValues['type']">
    <mat-radio-button value="individual">Individual</mat-radio-button>
    <mat-radio-button value="business">Business</mat-radio-button>
</mat-radio-group>

Ts 文件

ngOnInit()
{
    this.formValues['type'] = "business";
}

【讨论】：

【解决方案8】：

就我而言，选择问题已通过将name="howLong" 属性替换为[ngModelOptions]="{standalone: true}" 来解决。
需要注意的是，选择适用于A day or less than a day。但它不适用于More than a day

非工作版本：

   <mat-radio-group
        [(ngModel)]="howLong"
        name="howLong"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

工作版本：

   <mat-radio-group
        [(ngModel)]="howLong"
        [ngModelOptions]="{standalone: true}"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

【讨论】：

【解决方案9】：

如果您想使用 [(ngModel)] 将字符串或布尔值传递给您的 mat-radio-group，您可以在 TS 文件中为 [(ngModel)] 设置默认值。像这样： HTML file

Ts file

【讨论】：

尽量避免带有源代码的图片网址。最好将您的源代码作为代码块直接添加到您的问题/答案中。这将增加可读性和质量。看看here，欢迎来到 SO。