我试图动态填充表格,但无法弄清楚为什么它不起作用!
在这里,我得到了json,将对象数组保存在customerArray中。
export class AllCustomersComponent implements OnInit {
customerArray: any;
constructor(private http : HttpClient ) {}
ngOnInit() {
this.http.get('http://www.mocky.io/v2/5be715ce2e00008a0016945e')
.subscribe((data) => {
this.customerArray = data;
console.log(customerArray);
}
}
}
在这里,我试图用所述数组填充表。
<table class="table">
<thead>
<tr>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>46</td>
<td><i class="fas fa-edit"></i></td>
<td><i class="fas fa-trash-alt"></i></td>
</tr>
<tr>
<td *ngFor="let customer of customerArray">{{customer}}</td>
</tr>
</tbody>
</table>
但是我的桌子只显示了这个:
[object Object] [object Object] [object Object] [object Object] [object Object]
答案 0 :(得分:1)
您的客户是一个对象,angular应该如何知道要渲染什么?
您可能需要的是这样的
<tr *ngFor="let customer of customerArray">
<td>{{customer.firstname}}</td>
<td>{{customer.lastname}}</td>
<td>{{customer.age}}</td>
<td>{{customer.whatever}}</td>
<td>{{customer.whatever}}</td>
</tr>