Как получить доступ к содержимому проанализированного массива с помощью * ngFor в Ioni c 3?

Question

Мне нужна помощь в доступе к содержимому массива с помощью * ngFor. Ниже приведен JSON ответ из массива:

КОНТЕНТ МАРШРУТА

Вот как я вызываю контент с помощью ngFor

product. html

<ion-item-group *ngFor="let menu of products; let i = index">
    <ion-item class="item-frame" (click)="view(menu.id)" tappable>
        <div class="item-image" [style.background-image]="'url(' + menu.products.image_path + ')'">
            <ion-row class="item-bar" align-items-center>
                <ion-col col-2 *ngIf="menu.type !== 'fb'">
                    <ion-icon name="custom-hat"></ion-icon>
                </ion-col>
                <ion-col col-2 *ngIf="menu.type === 'fb'">
                    <ion-icon name="custom-facebook"></ion-icon>
                </ion-col>
                <ion-col col>
                    <h2 *ngIf="menu.type !== 'fb'">{{menu.products[0].name}}</h2>
                    <h2 *ngIf="menu.type === 'fb'">{{menu.products[0].name}}</h2>
                    <!-- <p>{{menu.products[0].resume}}</p> -->
                    <p>{{menu.products[0].id}}</p>
                </ion-col>
            </ion-row>
        </div>
    </ion-item>

product.ts

//Load the products
load(loading?: boolean, refresher?: Refresher) {
    this.loadingProvider.show(loading);
    this.productProvider.sorted().subscribe((data: any) => {
        this.loadingProvider.hide(refresher);
        if (data.status === "success") {


            var menus = [this.parseCategories(data.data)];
            //console.log(menus, "ora aqui tens")
            this.products = menus[0];       

            console.log(this.products, "ai")
        }
        this.content.resize();
    }, (error: any) => {
        this.loadingProvider.hide(refresher);
    })
}

parseCategories(data: any): any[] {
    let res: any = [];
    let cats = Object.keys(data);
    let products = data;
    cats.forEach((category: any) => {
        let newCategory = {
            name: category,
            hide: false,
            products: products[category]
        }
        res.push(newCategory);
    });
    return res;

}

Проблема в том, что я только получить один из каждого первого элемента в каждом массиве! Результат

Это то, что я получаю Буду очень признателен, если кто-нибудь поможет мне получить все содержимое каждого массива, а не только первый. Заранее спасибо!

Answer 1

После поломки двух клавиатур я нашел решение. Мне пришлось использовать индекс в * ngFor.

товарах. html

<ion-list class="list-frame" *ngIf="products">
</ion-list>
<ion-item-group *ngFor="let produtos of products; let i = index">
    <ion-item-divider color="white" sticky>{{produtos.name}}</ion-item-divider>
    <ion-item class="item-frame" (click)="view(product.id)" *ngFor="let produtos of products[i].products" tappable>
        <div class=" item-image" [style.background-image]="'url(' + produtos.image_path + ')'">
            <ion-row class="item-bar" align-items-center>

                <ion-col col-2 *ngIf="produtos.type !== 'fb'">
                    <ion-icon name="custom-hat"></ion-icon>
                </ion-col>
                <ion-col col-2 *ngIf="produtos.type === 'fb'">
                    <ion-icon name="custom-facebook"></ion-icon>
                </ion-col>
                <ion-col col>
                    <h2 *ngIf="produtos.type !== 'fb'">{{produtos.name}}</h2>
                    <h2 *ngIf="produtos.type === 'fb'">{{produtos.name}}</h2>
                    <p>{{produtos.resume}}</p>
                </ion-col>
            </ion-row>
        </div>
    </ion-item>
</ion-item-group>

product.ts

//Load the products
load(loading?: boolean, refresher?: Refresher) {
    this.loadingProvider.show(loading);
    this.productProvider.sorted().subscribe((data: any) => {
        this.loadingProvider.hide(refresher);
        if (data.status === "success") {
            this.products = this.parseCategories(data.data);    
        }
        this.content.resize();
    }, (error: any) => {
        this.loadingProvider.hide(refresher);
    })
}

parseCategories(data: any): any[] {
    let res: any = [];
    let cats = Object.keys(data);
    let products = data;
    cats.forEach((category: any) => {
        let newCategory = {
            name: category,
            hide: false,
            products: products[category]
        }
        res.push(newCategory);
    });
    return res;

}