Display a single Observable, not an array

Question

I search around the web and no problem to find how display an Observable<MyModel[]>. But I don't find how display an Observable<MyModel> to a form.

I'd like display firstName value I tried this :

{{ myModel.firstName | async }}

and I'd like use it (bidirectional) in an I tried this :

<input type="text" [(value)]="myModel.firstName">

I got this error : Cannot read property 'firstName ' of undefined at Object.eval [as updateRenderer]

Thanks,

Use {{ myModel?.firstName | async }} – Prachi May 14 '18 at 07:11 — Prachi, May 14 '18 at 07:11

score 3 · Answer 1 · answered May 14 '18 at 06:59

3

Because you have to write it like this :

 {{ (myModel | async).firstName }}

With your syntax, Angular thinks that firstName is an observable, while it's a string.

answered May 14 '18 at 06:59

are you sure can we use `async` pipe like this? – Pardeep Jain May 14 '18 at 07:02
2

Pretty sure yes – May 14 '18 at 07:03
1

Cool, I am not aware of this kind of usage of pipe +1 – Pardeep Jain May 14 '18 at 07:06
That's not really a pipe usage, you can also do it with variables like `(myModel as User).firstName` – May 14 '18 at 07:07
About display in ? – TheBoubou May 14 '18 at 07:13
Well yes, isn't that what you asked ? I just answered your first line of code ... – May 14 '18 at 07:15
Sorry I rephrase the question. I'd both in fact, you gave me 50% of the answer. – TheBoubou May 14 '18 at 07:17
Then you can't do that. Well, actually, I don't know if you can, but you should not. You sure can display that value in a text or a label, but if you want to make changes to this value, **you should create a variable and change it instead of trying to change the observable**. – May 14 '18 at 07:20

score 0 · Answer 2 · answered May 14 '18 at 06:59

0

you should use ngModel with input as

<input type="text" [ngModel]="myModel?.firstName">

or with interpolation as,

 {{ (myModel | async).firstName }}

answered May 14 '18 at 06:59

Sajeetharan

216,225
63
350
396

That's strange the service does not hit the database. I log the URL and the service works fine. Strangely when I use the "interpolation" I hit the database but nothing in the input. – TheBoubou May 14 '18 at 07:08

Display a single Observable, not an array

2 Answers2