Получать данные из API и отображать их на html

Question

Я пытаюсь выполнить вызов API и хочу показать несколько своих данных.

Мои данные поступают в виде таблицы.

В настоящее время у меня есть [objet: Objet]

console.log (this.data) =

1: {product_id: 6128961, products_date_added: "2016-10-04T00: 00: 00 + 02: 00"}

2: {product_id: 6129048, products_date_added: "2016-10-05T00: 00: 00 + 02: 00"}

Детский компонент. html:

        <mat-icon><div *ngFor='let data of datas'>{{datas.length}}</div></mat-icon>

Детский компонент .ts

@Input() counterDatasObservable: Observable<any>;
  data = [];

  constructor() {}

  ngOnInit() {
    this.counterDatasObservable.subscribe( datas => {
      this.data = datas;
      console.log(this.data);
      console.log('jesuis là');
      
    });

Родительский компонент. html:

        <app-counter [counterDatasObservable]="dataMlsService.getProducts('EnCours', 'Location')"></app-counter>

Мое решение здесь:

<mat-icon *ngIf='data'>{{data.length}}</mat-icon>

Answer 1

Детский компонент не знает о данных, в html вы должны использовать данные, а не переменную данных, например,

<mat-icon><div *ngFor='let row of data'>{{data.length}}</div></mat-icon>