PrimeNG Table Set an attribute from a Promise

I’m trying to reproduce the same example that exist on PrimeNG from their showcase

https://www.primefaces.org/primeng/showcase/#/table/basic

https://primeng-tablebasic-demo.stackblitz.io/

As resume we’ve a product.service.ts with the following method

getProductsSmall() {
    return this.http.get<any>('assets/products-small.json')
    .toPromise()
    .then(res => <Product[]>res.data)
    .then(data => { return data; });
}

the app.component.ts

export class AppComponent { 
    products: Product[];

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productService.getProductsSmall().then(data => this.products = data);
    }
}

the html

<p-table [value]="products">
    <ng-template pTemplate="header">
        <tr>
            <th>Code</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
        <tr>
            <td>{{product.code}}</td>
        </tr>
    </ng-template>
</p-table>

With the same code I don’t see any results on my table (I see an empty table). When I inspect the result inside then method (this.productService.getProductsSmall().then()) I see the data but outside this method the variable (this.products) appear as undefined.

 this.productService.getProductsSmall().then(data => (this.products = data [Here I can see the data] ));
 console.log(this.products);//Here I see an undefined

I assume the error is related with this it shouldn’t work on the primeNG samples neither and as result I’m confused about this.

What’s the best way to fix this behavior? How retrieve to set the this.products variable?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.