Question

我正在尝试使用扩展面板来保存数据库中的数据，以便可以更好地列出数据。

我正在尝试使用* 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[]) { }

Answer 1

只需为嵌套的*ngFor数组再添加一个sales循环

<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>
        <div *ngFor="let sale of data.sales">{{sale.name}}</div> // use your sale object here as you want
    </mat-expansion-panel>
</mat-accordion>

Answer 2

在面板主体上使用另一个* ngFor迭代嵌套数组

<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>
        <div class="sale-body" *ngFor="let s of data.sales"> <sale body here> </div>
    </mat-expansion-panel>
</mat-accordion>

在嵌套JSON数组上使用* ngFor

2 个答案: