This is really bothering me. I'm trying to display an array in angular 2/4. I think there's a mistake in Angular. the html, service, or component part, because my node back end works as it should. My html looks like this.
<div class = "container">
<li *ngFor = "let customer of customers">
<div class = "col md-6">
{{ customer.firstName }}
</div>
</li>
<div *ngFor = "let customer of customers">
<div class = "col md-6">
{{ customer.lastName }}
</div>
</div>
My service is this
@Injectable()
export class CustomerService {
constructor(private http: Http) { }
//retreiving custmers
getCustomers(){
return this.http.get('http://localhost:3001/api/customers')
.map(res => res.json());
}
}
My component is this
export class CustomersComponent implements OnInit {
customers: Customer[];
customer: Customer;
firstName: string;
lastName: string;
//initialize customer service
constructor(private customerService: CustomerService) { }
//initiated once component is loaded
ngOnInit() {
this.customerService.getCustomers()
.subscribe( customer =>
this.customer = customer);
}
You have a typo , change customer
to be customers
this.customerService.getCustomers()
.subscribe( customers => {
this.customers = customers
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.