Angular 默认单选按钮选择值“角度材质2”

我正在使用以下文档中的angular material 2单选按钮：

---

我面临的问题是让单选按钮的默认选择值为

No

。如果您在plunker中看到：您将发现没有选择任何选项。加载页面时，我希望默认值为

No

您可以使用

checked

，如下所示：

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

请注意，我们正在使用字符串

'false'

，而不是

false

，因为您的值具有值为

false

的字符串

---

您可以使用

[选中]

属性来实现它。

---

参见此

还有另一个选项，即您可以使用

[（ngModel）]

初始化带有您的组件的

md无线电组

---

普朗克。

许多普朗克似乎不再适合我了。这里有一个修改过的stackblitz：

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

[(ngModel)]="favoriteSeason"

在“ts”文件中：

  favoriteSeason: string = 'Winter';

或者我们可以设置复选框：

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

---

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

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

对话框中的组件

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

在这种情况下，我在对话框中打开数据。因此，数据来自以下方面： 打开对话框的component.ts preor。只是一个引用，这样你就知道我从哪里得到了上面的数据变量来设置值

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

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

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>

在我的例子中，通过将
name=“howLong”
属性替换为
[ngModelOptions]=“{standalone:true}”
解决了选择问题

需要注意的一点是，选择的工作时间为
一天或少于一天。但它的工作时间不超过一天

非工作版本：

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


一天多
一天或不到一天

工作版本：

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


一天多
一天或不到一天
如果要使用[（ngModel）]将字符串或布尔值传递给mat无线组，
您可以在TS文件中为您的[（ngModel）]设置默认值。
像这样：

谢谢你的帮助！！谢谢你的帮助！！请注意，如果使用
[（ngModel）]
，则不能再使用
[选中]
属性。例如，如果将
[选中]
显式设置为
false
，但绑定到
mat单选组的组件变量的值等于此
mat单选按钮的值
，单选按钮确实将保持选中编辑，建议为您发布的答案添加一些描述，问题日期为1,5年前，其他几个答案已经提到了使用
[选中]
，它们不限于静态值，而是根据用户的实际数据设置值。这个答案并没有添加任何有用的内容，当然也不会在没有描述的情况下添加。请尝试使用源代码避免使用图像URL。最好将源代码作为代码块直接添加到问题/答案中。这将提高可读性和质量。看一看，欢迎来到SO。
   <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>