离子动态单选按钮组

Posted 2023-03-13

【中文标题】离子动态单选按钮组

【英文标题】：Ionic dynamic radio button group

【发布时间】：2018-12-25 12:56:10

【问题描述】：

response = [
    
        "WellID": "9386",
        "DAYTIME": "2018-07-08",
        "BH_PRESS": "12"
    ,
    
        "WellID": "9386",
        "DAYTIME": "2018-07-08",
        "BH_PRESS": "11"
    ,
    
        "WellID": "1086",
        "DAYTIME": "2018-03-06",
        "BH_PRESS": "33"
    ,
    
        "WellID": "1086",
        "DAYTIME": "2018-03-06",
        "BH_PRESS": "32"
    ,
    
        "WellID": "1186",
        "DAYTIME": "2018-02-01",
        "BH_PRESS": "41"
    ,
    
        "WellID": "1186",
        "DAYTIME": "2018-02-01",
        "BH_PRESS": "42"
    
]

以上响应来自休息 API，我正在尝试这样做 如果 WellID 和 DAYTIME 更相似，这些记录应该在一个单选组中，并使用单选按钮在它们之间选择一个。 在那种情况下，我可能有多组单选按钮取决于响应。

但在以下实现中，它被视为一组。任何帮助将不胜感激

<ion-list radio-group [(ngModel)]="constraints"  *ngFor="let item of response" >    
  <ion-item>
    <ion-label>item.WellName</ion-label>
    <ion-radio  [value]="item.BH_PRESS" (ionSelect)="mcAnswer(item)" ></ion-radio>
  </ion-item>  

【参考方案1】：

您需要像下面的对象一样处理您的数组，然后您可以根据某些条件将其分组。

    "9386-2018-07-08":[
        "WellID":"9386","DAYTIME":"2018-07-08","BH_PRESS":"12",
        "WellID":"9386","DAYTIME":"2018-07-08","BH_PRESS":"11"
    ],
    "1086-2018-03-06":[
        "WellID":"1086","DAYTIME":"2018-03-06","BH_PRESS":"33",
        "WellID":"1086","DAYTIME":"2018-03-06","BH_PRESS":"32"
    ],
    "1186-2018-02-01":[
        "WellID":"1186","DAYTIME":"2018-02-01","BH_PRESS":"41",
        "WellID":"1186","DAYTIME":"2018-02-01","BH_PRESS":"42"
    ]

我写了一个函数。

processJsonForRadioGroup() 
        let newRespone = [];
        let newFinalResponse = ;
        for(let i=0;i<this.response.length;i++) 
            let singleObj = this.response[i]['WellID']+"-"+this.response[i]['DAYTIME'];
            if(newRespone.indexOf(singleObj)==-1) 
                newRespone.push(singleObj);
                newFinalResponse[singleObj] = [];
                newFinalResponse[singleObj].push(this.response[i]); 
             else 
                newFinalResponse[singleObj].push(this.response[i]);
            
        
        this.newFinalResponse = newFinalResponse;

        console.log(JSON.stringify(this.newFinalResponse));
    

现在的问题是 ngFor 无法处理对象，因此我们为此创建了一个管道。

您可以在此处找到一个工作示例，因为很难在文本中解释这一点，因此请参考示例。希望你能理解。

https://stackblitz.com/edit/ionic-ndnevk

【参考方案2】：

在您的.ts 中，创建一个新数组

modResponse = [];

在构造函数中，处理来自响应的信息并将其传递给新数组

// for creating group
let groupByWellIdAndDaytime = ;

this.response.forEach((res) => 
  // if group does not exist, create new
  // we use res.WellID+" "+res.DAYTIME because of the given condition on how to group
  if(!groupByWellIdAndDaytime[res.WellID+" "+res.DAYTIME])
    groupByWellIdAndDaytime[res.WellID+" "+res.DAYTIME] = [];
  

  // push the item to the empty group or existing group
  groupByWellIdAndDaytime[res.WellID+" "+res.DAYTIME].push(res);
  );

  // push the groups into the created array
  for (let divider in groupByWellIdAndDaytime)
    this.modResponse.push(divider: divider, contents: groupByWellIdAndDaytime[divider]);
  

  // call to check the value of the radio button 
  mcAnswer(event)
      console.log(event);
  

在你的.html

<ion-list>
    <ion-list radio-group *ngFor="let res of modResponse">
        <ion-item-divider>
             res.divider 
        </ion-item-divider>
        <ion-item *ngFor="let item of res.contents">
            <ion-label>item.WellID</ion-label>
            <ion-label>item.BH_PRESS</ion-label>
            <ion-radio [value]="item.BH_PRESS" (ionSelect)="mcAnswer($event)"></ion-radio>
        </ion-item>
    </ion-list>
</ion-list>

这将产生一个无线电组列表，而不是单个无线电组。

这里是stackblits，了解它的工作原理