未选择离子单选按钮

Question

>我有这样的字符串

值="值 1~显示值

1值 2~显示值 2">

我需要将此字符串显示为离子中的单选按钮选项，因为我正在将此字符串转换为这样的数组

getItems() {
    let newValues = [];
    let arr = this.values.split("n");
    for (let i = 0; i < arr.length; i++) {
        let keyValues = arr[i].split("~")
        newValues.push({
            "value": keyValues[0],
            "displayValue": keyValues[1]
        })
    }
    return newValues;
}

我的 html 模板看起来像这样

<form [formGroup]="formGroup">
    <ion-list radio-group formControlName="radioButton">
        <ion-item *ngFor="let item of getItems()">
            <ion-label>{{item.displayValue}}</ion-label>
            <ion-radio [value]="item.value"></ion-radio>
        </ion-item>
    </ion-list>
</form>

因此，当我将函数绑定与*ngFor一起使用时，单选按钮未被选中，但是如果我在*ngFor中使用普通数组，则一切正常。

我在这里重现了这个问题。

谁能帮忙？？

Answer 1

这应该可以解决问题

getItems() {
 return this.values
    .split('n')
    .map(v => v.split('~'))
    .map(([value, displayValue]) => ({ value, displayValue }))
}

现场演示

Answer 2

我认为这是您正在寻找的东西

getItems(){
  let newValues=[];
  let arr= this.values.split("n");
 console.log(this.formGroup);
 for(let i=0;i<arr.length;i++){
  let keyValues= arr[i].split("~");
  let isCheck = false;
  if (this.formGroup.value.radioButton === keyValues[0]) {
    isCheck = true;
  }
  newValues.push({"value":keyValues[0], "displayValue": keyValues[1], isCheck})
 }

https://stackblitz.com/edit/ionic-b7b1be?file=pages%2Fhome%2Fhome.ts

或者您可以只修改视图

<ion-radio [checked]="formGroup.value.radioButton === item.value" [value]="item.value"  ></ion-radio>

https://stackblitz.com/edit/ionic-kbq769?file=pages%2Fhome%2Fhome.html

Answer 3

我知道

这个问题已经回答了，但我有一个解决方案。

我已经在堆栈闪电战上创建了一个演示。我希望这对您/其他人有所帮助/指导。

代码片段

getItems() {
        let newValues = [];
        let arr = this.values.split("n");
        for (let i = 0; i < arr.length; i++) {
            let keyValues = arr[i].split("~");
            let checked = false;
            if (this.formGroup.get('radioButton').value === keyValues[0]) {
                checked = true;
            }
            newValues.push({ "value": keyValues[0], "displayValue": keyValues[1], checkedRadio: checked })
        }        getItems() {
        let newValues = [];
        let arr = this.values.split("n");
        for (let i = 0; i < arr.length; i++) {
            let keyValues = arr[i].split("~");
            let checked = false;
            if (this.formGroup.get('radioButton').value === keyValues[0]) {
                checked = true;
            }
            newValues.push({ "value": keyValues[0], "displayValue": keyValues[1], checkedRadio: checked })
        }
        return newValues;
  }