Muszę pomóc uzyskać dostęp do zawartości tablicy wewnątrz * ngfor. Poniżej znajduje się odpowiedź JSON z tablicy:

Treść tablicy

W ten sposób dzwonię do treści 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>

produkt.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;

}

Problem, który mam, jest to, że dostaję tylko jeden z każdego z pierwszego elementu w każdej tablicy! Wynik

Oto cuda Byłbym bardzo wdzięczny, jeśli ktoś pomoże mi dostać wszystkie zawartość każdej tablicy, a nie tylko pierwszej. Z góry dziękuję!

0
Daniel Morais 19 marzec 2020, 17:42

1 odpowiedź

Najlepsza odpowiedź

Po złamaniu dwóch klawiatur znalazłem rozwiązanie. Musiałem użyć indeksu w * ngfor.

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

produkt.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;

}

0
Daniel Morais 19 marzec 2020, 17:20