В моей структуре базы данных Firebase мне нужно получить продукты из этой таблицы доставки в формат HTML-таблицы Angular 6. Я получаю доступ только к данным о доставке, но я не могу получить доступ к дочерним данным продуктов. Он говорит об ошибке: не удается найти другой вспомогательный объект «[object Object]» типа «object». NgFor поддерживает привязку только к Iterables, таким как Arrays.
**Shippment.service.TS:**
getshippings() {
this.shippings = this.db.list("shippings");
return this.shippings;
}
**UserComponent.TS:**
export class UserComponent implements OnInit {
[x: string]: any;
shippinglist : Billing[];
user:User;
shipping: Billing;
constructor(public authService: AuthService,
private shippingService:ShippingService) {}
ngOnInit() {
this.getAllProducts();
}
getAllProducts() {
const x = this.shippingService.getshippings();
x.snapshotChanges().subscribe(
product => {
this.shippinglist = [];
product.forEach(element => {
const y = element.payload.toJSON();
y["$key"] = element.key;
this.shippinglist.push(y as Billing);
});
}
);
}
}
** Billing.TS:**
export class Billing {
$key: string;
firstName: string;
lastName: string;
emailId: string;
address: string;
landmark: string;
country: string;
state: string;
zip: string;
city:string;
phone:number;
products : [{
$key?: string;
productId: number;
title: string;
category: string;
price: number;
descr: string;
imageUrl: string;
}]
}
**HTML:**
<table class = "table">
<thead>
<tr>
<th>Name</th>
<th> Address </th>
<th> Email ID </th>
</tr>
</thead>
<tbody>
<tr *ngFor = "let p of shippinglist">
<td>{{p.firstName}} {{p.lastName}}</td>
<td>{{ p.address }}, {{p.landmark}},{{p.city}}, {{p.state}},
{{p.country}},{{p.zip}}</td>
<td>{{ p.emailId }}</td>
<ng-container *ngFor = "let m of p.products">
<td>{{m.dscr}}</td>
</ng-container>
</tr>
</tbody>
</table>
I **expect output** to get also product information in my table: ![Firebase Database][1][Output Screen][2]
[1]: https://i.stack.imgur.com/BfHW0.jpg
Чтобы получить доступ к вложенному списку в *ngFor
, вам нужно сделать что-то вроде:
<div *ngFor = "let p of shippinglist">
<div *ngFor = "let m of p.products">
<span>{{m.descr}}</span>
</div>
</div>
И что важно, вы получаете p.products
как объект из firebase, а не список, поэтому вам нужно изменить свой getAllProducts
,
getAllProducts() {
const x = this.shippingService.getshippings();
x.snapshotChanges().subscribe(
response => {
response.forEach(element => {
const product = element.payload.toJSON();
let all_product = product as Billing;
all_product.products = product["products"];
let new_product_arr = [];
for (var p in product["products"] as object) {
let push_products = product["products"][p] as Products;
new_product_arr.push(push_products);
}
all_product.products = new_product_arr;
this.shippinglist.push(all_product);
});
}
);
}