如何从角度11中的单选按钮获取价值 [英] how to get value from radio button in angular 11

问题描述

我有一个类似的API响应，

i have a API response like ,

0: {relate_id: 15, pid: 9, attr_slug: "size", items: "s,m,l", id: 1, …}
1: {relate_id: 16, pid: 9, attr_slug: "color", items: "yellow", id: 2, …}
length: 2

这是产品的品种详细信息..0:代表尺寸..1:代表颜色(它可能会像公斤，公羊等一样变化).

this is product's variety details..0: is for size..and 1:is for color (it may varry like kg,ram etc..)

我有类似的单选按钮

 <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:喜欢("s，yellow")或("m" yellow)，..

this onclick just giving the recent clicked ...but i need a pair of 1: & 2: like ("s,yellow) or ("m,yellow),..

我还尝试了[值]和模型为

i also tried with [value] and model as

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

但是我在console.log(this.finalvalue)中只得到'，'...如何实现呢?

but i get only ',' in console.log(this.finalvalue)...how to achieve this?

推荐答案

您必须使用

You have to use the mat-radio-group and use the change output to detect changes:

<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(','); 
}

这篇关于如何从角度11中的单选按钮获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！