离子动态单选按钮组答案

【问题标题】：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>

【问题讨论】：

标签： angularjs typescript ionic-framework

【解决方案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，了解它的工作原理

【讨论】：