используйте * ngFor для вложенного массива JSON

Question

Я пытаюсь использовать панель расширения для хранения моих данных из базы данных, чтобы я мог более аккуратно перечислить данные.

Я пытаюсь распечатать свой вложенный массив JSON с помощью * ngFor. Проблема в том, что мой 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"
            }
        ]
     }
}

EDIT: ОШИБКА, ПОЛУЧЕННАЯ:

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 в теле панели для итерации вложенного массива

<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>

Answer 2

просто добавьте еще один *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>