Can someone hellp? Display collection document content in the input field Firestore Angular

[Tha Senshi]

my intem.sevice.ts

import { Injectable } from '@angular/core';

import { AngularFirestore} from 'angularfire2/firestore';

import { map, take } from 'rxjs/operators';

@Injectable({

providedIn: 'root'

})

export class ItemService {

constructor(private afs: AngularFirestore) { }

create(item) {

return this.afs.collection('items').add(item);

}

getAll() {

return this.afs.collection('items').snapshotChanges().pipe(

take(1),

map(actions => {

return actions.map(a => {

const data = a.payload.doc.data();

const id = a.payload.doc.id;

return { id, ...data };

});

})

);

}

get(itemId) {

return this.afs.doc(`items/${itemId}`);

}

}

this is my item.component.ts

item = {};
constructor(
  private router: Router,
  private afs: AngularFirestore,
  private route: ActivatedRoute,
  private itemService: ItemService) {

  const id = this.route.snapshot.paramMap.get('id');
  if (id) {this.itemService.getItem(id).snapshotChanges().pipe(take(1), map(p => this.product = p));
}




my item.component.html

<input #title="ngModel" [(ngModel)]="item.title" name="title" type="text" id="title" class="form-control">


in my  my-item.component.html i have a link 
<a [routerLink]="['/my/items', p.id]">Edit</a>  when i click
 edit  sends me back to items.component with ID od item that a click in 
the URL, but never get data from firestore itmes in the input fied
Someone can hellp?

[Kato Richardson]

Pretty sure you need to pipe that through async:  [ngModel]="(item | async)?.title"

Note that this still isn't going to do what you want though. Writing the data back into item won't magically update Firestore. You'll still want to run change detection of some sort or save the data to Firestore on submit.

<input #title="ngModel" [ngModel]="item.title" (change)="fieldChanged()">

You should take a look at reactive forms, a much better fit for async data imo.

--
You received this message because you are subscribed to the Google Groups "Firebase Google Group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to firebase-tal...@googlegroups.com.
To post to this group, send email to fireba...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/firebase-talk/969fd8a7-7818-440b-ae3a-faae3c623d47%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Kato Richardson |

Developer Programs Eng |

kato...@google.com |

775-235-8398