分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何从 angular 11 的单选按钮中获取价值，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何从 angular 11 的单选按钮中获取价值？

开发过程中遇到如何从 angular 11 的单选按钮中获取价值的问题如何解决？下面主要结合日常开发的经验，给出你关于如何从 angular 11 的单选按钮中获取价值的解决方法建议，希望对你解决如何从 angular 11 的单选按钮中获取价值有所启发或帮助；

我有一个 API 响应，如,

0: {relate_ID: 15,pID: 9,attr_slug: "size",items: "s,m,l",ID: 1,…}
1: {relate_ID: 16,attr_slug: "color",items: "yellow",ID: 2,…}
length: 2

这是产品的品种详情..0：是尺寸..和 1：是颜色（可能会有所不同，如公斤、公羊等。）

我有这样的单选按钮，

 <section class="example-section"  *ngFor="let attr of Attr" >
      
        <mat-radio-button *ngFor="let checkBox of attr.items.split(',')" 
         [name]="attr.attr_slug"  (click)="onClick(checkBoX)" [value]="model[attr.attr_slug]" 
          class="example-margin">{{checkBox}}</mat-radio-button>
    
    </section>

这个 onclick 只给出最近点击的...但我需要一对 1: & 2: like ("s,yellow) or ("m,yellow),..

我也尝试使用 [value] 和模型作为

@H_385_5@model:any = {
  size : "",color : "",}
  finalValue = `${this.model.sizE},${this.model.color}`

但我在 console.log(this.finalvalue) 中只得到 ','...如何实现？

解决方法

您必须使用 @H_385_5@mat-radio-group 并使用 change 输出来检测更改：

<section *ngFor="let attr of Attr" >
  <mat-radio-group [value]="model[attr.attr_slug]"
                   [name]="attr.attr_slug"
                   (changE)="onRadioChange()">
    <mat-radio-button *ngFor="let checkbox of attr.items.split(',')" 
                      [value]="checkbox">
      {{checkbox}}
    </mat-radio-button>
  </mat-radio-group>
</section>

@ViewChildren(MatRadioGroup)
radios?: QueryList<MatRadioGroup>;

onRadioChange(): void {
  const value = this.radios?.map((radio) => radio.value).join(','); 
}