**Solved** NG0900: Error trying to diff 'value' Only arrays and iterables are allowed-CodePudding

I'm currently having an issue with my API results. I'm fairly new to Programming so I don't understand why It's giving me an error.

I'm trying to display my product information on the HTML page of my Angular.ts project.

Here is my product-info.component.ts

import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ProductArticle } from '../models/product-article';
import { ProductArticleService } from '../services/product-article.service';
import { OnInit } from '@angular/core';

@Component({
  selector: 'app-product-info',
  templateUrl: './product-info.component.html',
  styleUrls: ['./product-info.component.css']
})
export class ProductInfoComponent implements OnInit {
  products: ProductArticle[] = [];


  constructor(private productArticleService: ProductArticleService) { }

  ngOnInit(): void {

  }

  public getProductInfo() {
    this.productArticleService
      .getProduct()
      .subscribe((result: ProductArticle[]) => (this.products = result));
    console.log(this.products);
  }

}

And here is my product-info.component.html

<button (click)="getProductInfo()"></button>

<label *ngFor="let product of products">
    {{ product.id }}
</label>

Also this is the ProductArticle class.

export class ProductArticle {
    id?: number;
    name: string;
    description: string;
    price: number;
}

The console.log returns me an Object, yet I can't display it using *ngFor. When searching for the issue I found similar problems but I can't seem to make it work.

Here is my console log. Since I filter the results in the API request I can't get an Array returned. But it seems I need an Array.


`{id: 3, name: 'Overdog', description: 'Pineapple', price: 3434}
description
: 
"Pineapple"
id
: 
3
name
: 
"Overdog"
price
: 
3434
[[Prototype]]
: 
Object`

So basically tried to show my Api results in my UI. I used *ngFor but only got an error (Code: NG0900).

I also tried setting the 'products' array empty inside the method.

  public getProductInfo() {
    this.products = [];
    this.productArticleService
      .getProduct()
      .subscribe((result: ProductArticle[]) => (this.products = result));
    console.log(this.products);
  }

I got the same result.

EDIT: I have solved my Issue, it was my mistake of missing the fact that my API returns me a single product and not an Array of products, so inside the .ts files I used 'ProductArticle[]' and not 'ProductArticle'. After replacing all the needed Brackets and cleaning up some code I got the following result:

product-info.components.ts

  public async getProductInfo() {

    (await this.productArticleService
      .getProduct())
      .subscribe((result) => (this.product = result));
    await console.log(this.product);

  }

product-article.service

@Injectable({
  providedIn: 'root'
})
export class ProductArticleService {
  private url = "ProductData";

  constructor(private http: HttpClient) { }

  public async getProduct(): Promise<Observable<ProductArticle>> {
    return await this.http.get<ProductArticle>(`${environment.apiUrl}/${this.url}`);
  }
}

product-info.component.html

<label>
    {{ product.id }}
    {{ product.name }}
</label>

I'm very thankful for the Answers and time spend, have great day!

CodePudding user response：

You should push to your products array in subscribe.

this.products=[]
data.forEach(el => {
this.products.push(el)
});

CodePudding user response：

try using:

<label *ngFor="let product of products | async">
    {{ product.id }}
</label>