Question

有我的.html代码

    <ion-list radio-group [(ngModel)]="porsiyon" (ionChange)="porsiyontipigetir()">
        <ion-list-header>
            Porsiyon Seç
        </ion-list-header>
        <ion-item *ngFor="let item of porsiyonlar">
            <ion-label>{{item.porsiyon}}
                <p>{{item.fiyat}} ₺</p>
            </ion-label>
            <ion-radio value="{{item.id}}"></ion-radio>
        </ion-item>
        <button *ngIf="porsiyon != ''" ion-button block (click)="ilerle1()">İlerle</button>

    </ion-list>

您看到[(ngModel)] = "porsiyon"，如果得到此值，则只有记录ID。我希望所有来自选定单选按钮的值。

我的意思是{{item.porsiyon}}，{{item.fiyat}} 如何在.ts文件中使用这些值？

谢谢大家...

Answer 1

我假设您要查找的是.ts组件文件中该特定单选按钮的相应值。如果我的假设是正确的，那么这篇文章应该会对您有所帮助。

How get checked value from radio button angular

基本上，您只会触发某个方法/函数，使其在单选按钮的某些事件中发生。希望有帮助。

.html

 <ion-item *ngFor="let item of porsiyonlar">
     <ion-label>{{item.porsiyon}}
          <p>{{item.fiyat}} ₺</p>
     </ion-label>
     <ion-radio value="{{item.id}}" (change)="onItemChange($event)"></ion-radio>
 </ion-item>

.ts

onItemChange(value){
   console.log(" Value is : ", value );
}

Answer 2

您可以使用id和find方法从porsiyonlar数组中获取选定的项目

porsiyontipigetir() {
 const selectedItem = this.porsiyonlar.find(i => i.id === this.porsiyon)
 console.log(selectedItem .porsiyon,selectedItem .fiyat)
}

另一种选择是将值绑定到它自己的对象上

        <ion-radio [value]="item"></ion-radio>

组件

porsiyontipigetir() {
 console.log(this.porsiyon.porsiyon,this.porsiyon.fiyat , this.porsiyon.id)
}

Answer 3

 this.porsiyonlar.filter(item => {
  if(item.id === this.porsiyon){
    this.porsiyonadi = item.porsiyon;
  }
});

正确答案，谢谢大家

如何从选定的单选按钮获取价值？

3 个答案: