CODEWITHSUNDEEP
angular
Sampath
Sampath

Reputation: 65870

Method evaluates indefinitely

Can you tell me why this method getAlphabetCharacter() gets evaluated indefinitely even though it's having only 2 items (0 and 1)? How can I avoid it?

Video about the issue

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

Upvotes: 0

Views: 81

Answers (1)

developer033
developer033

Reputation: 24874

Method evaluates indefinitely

It's normal behavior when you call a method this way in template.

For more explanation see this question.

In order to solve your problem, you could use Array#map and create a new property for every object (something like alphaChar), so you can access i.alphaChar in template, as below:

Component:

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

Template:

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

DEMO

EDIT#1 (Not really related to the original question):

I noticed that you're using multiple radio buttons, so you must wrap them with the radio-group attribute, as described in 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

Also, if you want to bind the selected value to a variable, just add [(ngModel)] at same level of radio-group attribute.

Ex:

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

Upvotes: 1

Related Questions