I was attempting to inject a service (contact.service.ts) into a component (contact-list.component). The service contains data on employees defined in contacts.ts. While I was able to successfully receive the data, I encountered difficulty in rendering it using ngFor.
---------contacts.ts---------------
export interface Contacts {
contactsList: Contact[];
}
export interface Contact {
id: number;
name: string;
city: string;
}
------------contact.service.ts-----------
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Contacts } from '../models/contacts';
export class ContactService {
url = 'http://www.mocky.io/v2/5c5d880f3200000e11220880';
constructor(private http: HttpClient) { }
getContacts(): Observable<Contacts> {
return this.http.get<Contacts>(this.url);
}
}
-----------contact-list.component--------------
import { ContactService } from 'src/app/services/contact.service';
import { Contacts } from 'src/app/models/contacts';
@Component({
selector: 'app-contact-list',
templateUrl: './contact-list.component.html',
styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {
contacts;
constructor(private _contactService: ContactService) { }
ngOnInit() {
this._contactService.getContacts().subscribe(data => this.contacts=data);
}
}
Here is my attempt at rendering the data:
<p class="title"> Contact Applications </p>
<div class="list">
<p *ngFor="let contact of contacts">
{{contact.name}}
</p>
</div>
However, I encountered this error message:
ERROR: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.