Question

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"
    }
]

以上响应来自rest 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>

Answer 1

在您的.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的工作方式

Answer 2

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

{
    "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 个答案: