Question

你能告诉我为什么这个方法getAlphabetCharacter()被无限期评估，即使它只有2个项目（0和1）？我怎么能避免它？

html的

<ion-item *ngFor="let i of inputs;let index = index">
  <ion-label><span>{{getAlphabetCharacter(index)}}</span></ion-label>
  <ion-radio value="{{index}}" (ionSelect)="toggleChoiceOther(i.label)"></ion-radio>
</ion-item>

.TS

 getAlphabetCharacter(index: number): string {
    return String.fromCharCode(65 + index);
  }


this.inputs= [
        {
            "encode": "M",
            "display": "He",
            "label": "gender"
        },
        {
            "encode": "F",
            "display": "She",
            "label": "gender"
        }
    ],

Answer 1

方法无限期评估

在模板中以这种方式调用方法时，这是正常的行为。

有关详细说明，请参阅this question。

为了解决您的问题，您可以使用 Array＃map 并为每个对象创建一个新属性（类似alphaChar），以便您可以访问i.alphaChar在模板中，如下所示：

<强> 组件：

this.inputs.map((elem, i) => elem.alphaChar = this.getAlphabetCharacter(i));

<强> 模板：

<ion-label><span>{{i.alphaChar}}</span></ion-label>

DEMO

编辑＃1（与原始问题无关）：

我注意到您正在使用多个单选按钮，因此您必须使用radio-group 属性对其进行换行，如docs中所述：

<ion-list radio-group>
  <ion-list-header>
    Alphabet
  </ion-list-header>
  <ion-item *ngFor="let i of inputs;let index = index">
    <ion-label><span>{{i.alphaChar}}</span></ion-label>
    <ion-radio [value]="index" (ionSelect)="toggleChoiceOther(i.label)"></ion-radio>
  </ion-item>
</ion-list>

PLUNKER

此外，如果您想将所选值绑定到变量，只需在[(ngModel)] 属性的相同级别添加radio-group。

<强>实施例

<ion-list radio-group [(ngModel)]="myVariable">...</ion-list>

方法无限期地评估

1 个答案: