Method evaluates indefinitely

Question

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

*Method evaluates indefinitely*. Yes, it happens when you call a method this way in template. It's normal behavior.. For more explanation see [**this question**](http://stackoverflow.com/questions/43081810/angular2-infinite-loop-when-i-call-method-from-a-angular-2-class-inside-templa). So, what you could do is to use **Array#map** and create a new property for every object *alphaChar* (something like this), so you can access `i.alphaChar` in template. Check this [**PLUNKER**](http://plnkr.co/edit/0u0xfYoGoUSMEPjCojfp?p=preview). — developer033, May 17 '17 at 23:22

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

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>

edited May 23 '17 at 12:26

Community

1
1

answered May 17 '17 at 23:47

developer033

24,267
8
82
108

I have a small problem here.You can see that my HTML template where it uses `i.label` too.How can I get that when I return only one variable from the `map` method? – Sampath May 18 '17 at 00:03
On your plunker where I cannot select the radio buttons too? – Sampath May 18 '17 at 00:05
*How can I get that when I return only one variable from the map method?* Nope, you aren't returning only one variable from the `map`. You're creating a new *property* for every object in your `array`. Please, check the update. – developer033 May 18 '17 at 00:42
1

Excellent.Thank you so much :) – Sampath May 18 '17 at 01:02

Method evaluates indefinitely

1 Answers1