【发布时间】：2019-04-02 12:53:36
【问题描述】：
我正在尝试使用扩展面板来保存数据库中的数据，以便更好地列出数据。
我正在尝试使用 *ngFor 打印出我的嵌套 JSON 数组。问题是我的 JSON 是嵌套的，我将如何做到这一点？
在这里，我试图在面板顶部打印出我的姓名和总销售额。 单击它后，它应该使用嵌套数组中的其他数据打开下面板。
HTML
<mat-accordion>
<mat-expansion-panel *ngFor="let data of dataList">
<mat-expansion-panel-header>
<mat-panel-title>
{{data.name}}
</mat-panel-title>
<mat-panel-description>
{{data.total_sales}}
</mat-panel-description>
</mat-expansion-panel-header>
{{data.sales}}
</mat-expansion-panel>
</mat-accordion>
JSON 由我的 get.http 函数返回
{""
:{"name":null,
"total_sales":1200,
"sales": [
{
"name":null,
"masterID":"5049",
"beerline":"2",
"containerNo":"1",
"pluNo":"1",
"pluName":"Smirnoff 2cl",
"pluDepartment":"VODKA",
"pluPrice":"20.00",
"sold_count":"54"
},
{
"name":null,
"masterID":"4028",
"beerline":"8",
"containerNo":"4",
"pluNo":"1",
"pluName":"Smirnoff 2cl",
"pluDepartment":"VODKA",
"pluPrice":"20.00",
"sold_count":"1"
},
{
"name":null,
"masterID":"4028",
"beerline":"9",
"containerNo":"5",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
},
{
"name":null,
"masterID":"4028",
"beerline":"10",
"containerNo":"6",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
},
{
"name":null,
"masterID":"4028",
"beerline":"11",
"containerNo":"7",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
},
{
"name":null,
"masterID":"4028",
"beerline":"12",
"containerNo":"8",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
}
]},
"Show Room":
{
"name":"Show Room",
"total_sales":4110,
"sales":[
{
"name":"ShowRoom",
"masterID":"4028",
"beerline":"1",
"containerNo":"1",
"pluNo":"1",
"pluName":"Smirnoff2cl",
"pluDepartment":"VODKA",
"pluPrice":"20.00",
"sold_count":"198"
},
{
"name":"ShowRoom",
"masterID":"4028",
"beerline":"1",
"containerNo":"2",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"5"
},
{
"name":"ShowRoom",
"masterID":"4028",
"beerline":"3",
"containerNo":"2",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
}
]},
"Henriks Place":
{
"name":"Henriks Place",
"total_sales":50,
"sales":
[
{
"name":"Henriks Place",
"masterID":"4028",
"beerline":"4",
"containerNo":"2",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
},
{
"name":"Henriks Place",
"masterID":"4028",
"beerline":"6",
"containerNo":"3",
"pluNo":"3",
"pluName":"Johnsrom",
"pluDepartment":"rom",
"pluPrice":"25.00",
"sold_count":"1"
}
]
}
}
编辑： 我得到的错误：
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3152)
at checkAndUpdateDirectiveInline (core.js:9253)
at checkAndUpdateNodeInline (core.js:10514)
at checkAndUpdateNode (core.js:10476)
at debugCheckAndUpdateNode (core.js:11109)
at debugCheckDirectivesFn (core.js:11069)
at Object.eval [as updateDirectives] (SaleComponent.html:33)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11061)
at checkAndUpdateView (core.js:10458)
at callViewAction (core.js:10699)
函数返回 json：
getSale1(): Observable<Sale1Model[]> {
return this.http.get<Sale1Model[]>(API_URL + '/live/sale', this.httpUtils.getHTTPHeader())
}
编辑 2：
这是我的模型类：
export class Sale1Model {
constructor(
public name: string,
public total_sales: string,
public sales: string[]) { }
【问题讨论】：
-
我认为更好的解决方案是改变你的 JSON 结构，但是你能不能也展示一下得到这个的服务？
-
@Gabax 添加了错误消息和我的函数获取 json，如果我要这样做，你会将 json 结构更改为什么？
-
你也可以添加 Sale1Model 类吗？无论如何，我会改变你的 JSON 结构，因为你有：
{ "": { "name": null, "total_sales": 1200, "sales": [ ] };虽然这样会更好：{ "name": null, "total_sales": 1200, "sales": [ ] }或{ "data": { "name": null, "total_sales": 1200, "sales": [ ] } -
@Gabax 我现在添加了我的模型类。这可能是我试图在模型中声明数组的方式吗？ - 你能看一下吗？感谢您的帮助！
-
我没有看到错误，但我不明白为什么你的第一个对象是空的。无论如何，您可以尝试以下答案之一，看看它是否有效。我不知道 Angular 是否考虑空对象的名称，所以请告诉我