My experience with using Cloud Firestore has been smooth in casting to an object, but I have encountered an issue when trying to call methods on that object. Below is the model definition I am working with -
contact.ts
export class Contact {
id: string
firstname: string
lastname: string
email: string
getFullname() {
return this.firstname + this.lastname
}
}
contact.service.ts
@Injectable()
export class ContactService {
getAll(raiseId: string): Observable<Contact[]> {
this.contactsCollection = this.afs.collection<IContact>('contacts')
this.contacts$ = this.contactsCollection.snapshotChanges().pipe(
map(actions => actions.map(a => {
const contact = a.payload.doc.data() as Contact;
const id = a.payload.doc.id;
return { id, ...contact };
}))
);
return this.contacts$;
}
}
contact.component.ts
@Component({
selector: 'contact-view',
templateUrl: './contact-view.component.html',
styleUrls: ['./contact-view.component.scss']
})
export class ContactViewComponent implements OnInit {
contacts$: Observable<Contact[]>;
contacts: Contact[];
constructor(
public contactService: ContactService
) { }
ngOnInit() {
this.contacts$ = this.contactService.getAll();
this.contacts$.subscribe(contacts => {
this.contacts = contacts;
})
})
}
}
component.component.html
<div *ngFor="let contact in contacts">{{contact.getFullname()}}</div>
Despite following the correct model definition, the getFullname() method is triggering an error
TypeError: _v.context.$implicit.getFullname is not a function
It would be helpful if someone could shed light on why this issue is arising and if there is a workaround to call a function on a cast object.