blocks|key|4119333|text|很多人似乎不再为我工作了。这里有一个修改过的stackblitz：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4119334|Blitz|offset|length|4119335|如前所述，我们可以设置ngModel和变量：|4119336|[(ngModel)]="favoriteSeason"|code-block|syntax|javascript|4119337|在“ts”文件中：|4119338|++favoriteSeason:+string+=+'Winter';|4119339|或者我们可以设置选中的：|4119340|[checked]="season+===+'Winter'"+|4119341|我最近发现的另一个小问题是，如果你错误地给了mat-checkbox不正确的(重复的if+)，那么它就不能工作-你不能检查任何东西。确保您的ID是唯一的。|4119342|entityMap|0|LINK|mutability|MUTABLE|url|https://stackblitz.com/edit/angular-jh9mpq?file=app%252Fradio-ng-model-example.html^0|0|0|5|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]]|A|$]]|$1|F|3|G|5|6|7|19|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1C|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|J|7|1E|8|@]|9|@]|A|$K|L]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

A lot of the plunkrs don't seem to work for me anymore. There's a modified stackblitz here:

<a href="https://stackblitz.com/edit/angular-jh9mpq?file=app%2Fradio-ng-model-example.html" rel="noreferrer">Blitz</a>

As mentioned we can either set the ngModel and the variable:

<pre><code>[(ngModel)]="favoriteSeason"
</code></pre>

and in the 'ts' file:

<pre><code> favoriteSeason: string = 'Winter';
</code></pre>

Or we can set the checked:

<pre><code>[checked]="season === 'Winter'" 
</code></pre>

Another little gotcha I've discovered recently is that if you mistakenly give mat-checkbox incorrect (duplicate IDs), then it does not work - you cannot check anything. Ensure your IDs are unique.

blocks|key|5537060|text|您可以使用checked，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5537061|[checked]="data.value+==='false'"+|code-block|syntax|javascript|5537062|请注意，我们使用字符串'false'而不是false进行检查，因为您的值具有值为false的字符串。|5537063|5537064|entityMap^0|5|7|0|0|B|7|L|5|14|5|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|S|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|10|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|O|$]]

You can use <code>checked</code>, like so:

<pre><code>[checked]="data.value ==='false'" 
</code></pre>

notice that we are checking using string <code>'false'</code>, instead of <code>false</code>, as your value has the string with value <code>false</code>.

<a href="https://plnkr.co/edit/aYwGK7yhT0LHFhfXjl6m?p=preview" rel="noreferrer">Plunker</a>

blocks|key|5537081|text|你可以通过[checked]属性来实现。查看此Plunker|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5537082|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/Nkz4FTWWoGmVthhGq63p?p=preview^0|5|9|N|7|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

You can achieve it with <code>[checked]</code> attribute.
See this <a href="https://plnkr.co/edit/Nkz4FTWWoGmVthhGq63p?p=preview" rel="noreferrer">Plunker</a>

blocks|key|5537112|text|还有另一种选择，那就是你可以使用[(ngModel)]用你的组件来初始化md-radio-group。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5537113|plunker+demo。|5537114|entityMap|0|LINK|mutability|MUTABLE|url|https://plnkr.co/edit/Jp2onftG2kaI30C5Wfcy?p=preview^0|G|B|10|E|0|8|4|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

there is another option which is you can use <code>[(ngModel)]</code> to initialize the <code>md-radio-group</code> with your component.

plunker <a href="https://plnkr.co/edit/Jp2onftG2kaI30C5Wfcy?p=preview" rel="noreferrer">demo</a>.

blocks|key|1621499|text|我喜欢使用材质单选按钮时的反应式方法。以下是如何检查特定formControlName的数据库真假的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1621500|对话框中的组件|offset|length|style|BOLD|1621501|<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>|code-block|syntax|javascript|1621502|如果这是更新表单，请确保在表单生成器中设置值。示例如下：|1621503|对话框中组件的.ts文件。|1621504|this.viewClient.setValue({
++++++trueClient:+this.data.trueClient
++++});|1621505|在本例中，我将在对话框中打开数据。因此，数据来自于打开该对话框的component.ts+prior。这只是一个参考，这样你就知道我在哪里得到了上面的数据变量来设置值。|1621506|用于打开对话框的组件。有关如何设置的详细信息，请参考材料文档中的Dialog。|1621507|const+dialogRef+=+this.dialog.open(ClientNotesComponent,+{
++++++++height:+'600px',
++++++++width:+'800px',
++++++++data:+{trueClient:+trueClient}
++++});
+});
}|1621508|entityMap|0|LINK|mutability|MUTABLE|url|https://material.angular.io/components/dialog/overview^0|0|5|2|0|0|0|S|0|0|D|0|0|0|2C|0|0|13|W|6|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1E|8|@$D|1F|E|1G|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1H|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1I|8|@$D|1J|E|1K|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|1L|8|@$D|1M|E|1N|F|G]]|9|@$D|1O|E|1P|1|1Q]]|A|$]]|$1|W|3|X|5|J|7|1R|8|@]|9|@]|A|$K|L]]|$1|Y|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|15]]]]

I love the reactive approach when working with material radio buttons. Below is an example of how to check for true and false with your database for a specific formControlName

Component within the Dialog Box

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

If this is an update form, make sure to set the values in your form builder. Example below:

.ts file for the component within the dialog box. 

<pre><code>this.viewClient.setValue({
 trueClient: this.data.trueClient
 });
</code></pre>

In this case i am opening the data within a dialog box. So the data is coming from the below:
component.ts prior that opens the dialog box. Just a reference so that you know where i got the data variable from above to set the values. 

Component used to open the dialog box. Reference to <a href="https://material.angular.io/components/dialog/overview" rel="noreferrer">Dialog</a> in Materials docs for more info on how to setup. 

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

blocks|key|5537180|text|<mat-radio-button+[checked]="true"</mat-radio-button>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|5537181|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;mat-radio-button [checked]="true"&lt;/mat-radio-button&gt;
</code></pre>

blocks|key|1621519|text|HTML文件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1621520|<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>|code-block|syntax|javascript|1621521|Ts文件|1621522|ngOnInit()
{
++++this.formValues['type']+=+"business";
}|1621523|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

HTML file

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

Ts file

<pre><code>ngOnInit()
{
 this.formValues['type'] = "business";
}
</code></pre>

blocks|key|5537227|text|在我的例子中，通过用[ngModelOptions]="{standalone:+true}"替换name="howLong"属性，已经解决了选择问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5537228|需要注意的一点是，该选择适用于A+day+or+less+than+a+day。但它对More+than+a+day不起作用。|5537229|非工作版本：|5537230|+++<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>|code-block|syntax|javascript|5537231|工作版本：|5537232|+++<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>|5537233|entityMap^0|A|11|1D|E|0|F|O|17|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|14|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|17|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|T|$]]

In my case the selection issue has been resolved by replacing the <code>name="howLong"</code> attribute with <code>[ngModelOptions]="{standalone: true}"</code>. 
Point to be noted, the selelction was working for <code>A day or less than a day</code>. But it was not working for <code>More than a day</code>

Non working version:

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

Working version:

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

blocks|key|2009042|text|如果要使用(ngModel)将字符串或布尔值传递给mat-radio-group，则可以在TS文件中为(ngModel)设置默认值。像这样：+HTML+file|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2009043|Ts+file|2009044|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/BsSgK.png|1|https://i.stack.imgur.com/P3ZhN.png^0|1Y|A|0|0|0|7|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

if you want to pass a string or boolean to your mat-radio-group using [(ngModel)],
you can set a default value for your [(ngModel)] in the TS file. 
like this:<a href="https://i.stack.imgur.com/BsSgK.png" rel="nofollow noreferrer"> HTML file</a>

<a href="https://i.stack.imgur.com/P3ZhN.png" rel="nofollow noreferrer">Ts file</a>

I am working on angular material 2 radio button following this documentation:<a href="https://material.angular.io/components/component/radio" rel="noreferrer">https://material.angular.io/components/component/radio</a>.

The problem that I am facing is to have the radio button a default selected value of <code>No</code>. If you see in the plunker:<a href="https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview" rel="noreferrer">https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview</a> you will find that none of the options are selected. I would want the default value to be <code>No</code> when the page loads.

Default radio button select value angular material 2

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在使用angular material 2单选按钮，遵循以下文档：。我面临的问题是让单选按钮的缺省选定值为No。如果您在plunker:中看到，您将发现没有选择任何选项。当页面加载时，我希望缺省值为No。

问默认单选按钮选择值角度材质2
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问默认单选按钮选择值角度材质2EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问默认单选按钮选择值角度材质2
EN