Попытка Outtput mat-grid-tile и данных, предоставленных Coud-Firestore

Question

Я пытаюсь вывести данные в одно и то же время, когда отображается mat-grid-tile

Я использую Angular * ngForOf, чтобы достичь этого

<mat-grid-list cols="12" rowHeight="500px">
    <mat-grid-tile *ngFor="let card of cards | async; let produto of produtos | async" [colspan]="card.cols" [rowspan]="card.rows" >  
      <mat-card class="product-cards" >
        <img matCardImage src="{{produto.imageURL}}">
        <mat-card-header>
          <mat-card-title>{{produto.nomeProduto}}</mat-card-title>
          <mat-card-subtitle>{{produto.preco | currency:'AOA':'symbol-narrow':'2.2-4'}}</mat-card-subtitle>
        </mat-card-header>
        <mat-card-content>
            {{produto.descricao}}
        </mat-card-content>
        <mat-card-actions align="end">
          <button mat-icon-button (click)="onClick" matTooltip="Favorito">
            <mat-icon class="mat-18">favorite</mat-icon>
          </button>
          <button mat-icon-button (click)="onClick" matTooltip="Adicionar ao carrinho">
            <mat-icon class="mat-18">add_shopping_cart</mat-icon>
          </button>
          <button mat-icon-button matTooltip="Ver detalhes" routerLink="{{produto.id}}">
            <mat-icon class="mat-18">visibility</mat-icon>
          </button>
          <button mat-icon-button (click)="onClick" matTooltip="Editar">
            <mat-icon class="mat-18">edit</mat-icon>
          </button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>

Этострока кода, которая пытается достичь этого подхода:

<mat-grid-tile *ngFor="let card of cards | async; let produto of produtos | async">

, но ничего не выводит.

Answer 1

Второй год выпуска продукции | async не читается, потому что * ngFor не работает таким образом. Отметьте this. Попробуйте объединить его с * ngIf. Также, если вы поместите второй * ngFor внутри mat-grid-tile, как это:

 <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">  
  <mat-card class="product-cards" *ngFor="let produto of produtos | async" >
   ...
    </mat-card-actions>
  </mat-card>
</mat-grid-tile>

вы получите ваши плитки по желанию, но каждый контент будет заполнен всем массивом.