Question

我有一个像这样的字符串

values =＆＃34; value1~显示值1 \ nvalue2~显示Vaue 2＆＃34;

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

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中使用普通数组，那么一切都很完美。

我在这里复制了问题stackblitz。

任何人都可以帮忙吗？

Answer 1

这应该可以解决问题

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

Live demo

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

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

我在 stackblitz 上创建了一个演示版。我希望这会有助于/指导你/他人。

CODE SNIPPET

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;
  }

离子单选按钮没有被选中？

3 个答案: