Angular Material – 将值传递给单选按钮组

huangapple go评论122阅读模式
英文:

Angular Material - passing value to radio group

问题

"mat-radio-group" 中传递值为什么不起作用?这两个按钮都没有被选中。但如果我在 "mat-radio-group" 中明确使用 "value="2"",一切都正常。

类内的 TypeScript:

  1. radioValue = 2;

HTML:

  1. <mat-radio-group [value]="radioValue">
  2. <mat-radio-button class="mr-2" value="1"></mat-radio-button>
  3. <mat-radio-button value="2"></mat-radio-button>
  4. </mat-radio-group>
英文:

Why passing the value to mat-radio-group doesn't work? Any of these two buttons is checked. But if I explicitly use value=&quot;2&quot; in mat-radio-group everything works fine.

TS inside class

  1. radioValue = 2;

HTML

  1. &lt;mat-radio-group [value]=&quot;radioValue&quot;&gt;
  2. &lt;mat-radio-button class=&quot;mr-2&quot; value=&quot;1&quot;&gt;Male&lt;/mat-radio-button&gt;
  3. &lt;mat-radio-button value=&quot;2&quot;&gt;Female&lt;/mat-radio-button&gt;
  4. &lt;/mat-radio-group&gt;

答案1

得分: 1

问题与数据类型有关,您正在合并stringnumber。请按照以下方式更改您的模板(还要在mat-radio-button中使用[value]):

  1. <mat-radio-group [value]="radioValue">
  2. <mat-radio-button class="mr-2" [value]="1"></mat-radio-button>
  3. <mat-radio-button [value]="2"></mat-radio-button>
  4. </mat-radio-group>
英文:

The problem is related to the data type, you're merging string and number. Change your template as follows (also use [value] with mat-radio-button):

  1. &lt;mat-radio-group [value]=&quot;radioValue&quot;&gt;
  2. &lt;mat-radio-button class=&quot;mr-2&quot; [value]=&quot;1&quot;&gt;Male&lt;/mat-radio-button&gt;
  3. &lt;mat-radio-button [value]=&quot;2&quot;&gt;Female&lt;/mat-radio-button&gt;
  4. &lt;/mat-radio-group&gt;

huangapple
  • 本文由 发表于 2020年1月3日 15:41:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/59574861.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定