Can I use [ngModel] with async function?

Ionic Framework ionic-v3
1

My code is the following:

<ion-input [ngModel]="getValorationFilm(film.id')"></ion-input>

and getValorationFilm( ) is an async function and return a number.

It doesn’t work for me due to its a infinite loop.
How can I use ngModel with async funcition?
Thank you so much

2

I haven’t tested this, but does this work?
<ion-input [ngModel]="(getValorationFilm(film.id) | async)"></ion-input>

3

Thank you @MattE , unfortunately it doesn’t work for me, the infinite loop still alive …

4

Maybe something is wrong with your code
Can you show the getValorationFilm function?

5

i think [(ngModel)] is the correct one instead of [ngModel]

6

Ah yeah, that could be the issue.
I overlooked that one

7

@rlwt If i write [(ngModel)] the error is this:

<ion-input [ERROR ->][(ngModel)]="(getValorationFilm(film.id) | async)"></ion-input>
       "): ng:///AppModule/main.html@29:63
Parser Error: Unexpected token ), expected identifier or keyword at column 66 in [(getValorationFilm(film.id) | async)=$event]
8

@MattE my getValorationFilm function is the following:

public getValorationFilm(filmId: string){

this.filmSrv.getFilmById(filmId).then(
     film =>   return film.id
);
}
9

What do you mean that it’s an infinite loop?

And are you also sure that you want to be using a function here, particularly an async one? It will likely wind up not being terribly performant with how Angular’s change detection works.

10

Yes, propably you are right, it could a bad idea… but i dont know how get a value of each film inside of *ngFor

11

Hi, why not try a variable, and update it whenever the film.id value changes instead of setting your input to a function?
You can set your input’s model to a variable, and whenever the film.id value changes you can call your function to get the new value.

12

Hi, because i have a ion-list win a *ngFor and i want to display the value of each film.

13

Hello,

what cguzes mneans is, that you can do that also with a variable. I think you create a arrray, exsample films, to feed your ngFor.

Maybe yout array contains object like {film: ‘starwars1’} and you can extend it by {film: ‘starwars1’, id:filmId} and push this to your arry films

ngfor let fi in films and
[ngModel]=“fi.id”

Oh man its late, I hope its understandable.

Best regards, anna-liebt

14

Its a good idea, you are right. Thank you guys :slight_smile: