1

今天我正在尝试学习使用有角度的材料。但是我在调​​用组件时遇到了问题。我在这里打电话<app-grid-list></app-grid-list>

但我的问题是 4 个生成的图块具有相同的内容。如何更改这些内容？

home.component.html

<div class="grid-container">
 <h1 class="mat-h1">Today Deals</h1>
  <mat-grid-list cols="2" rowHeight="350px">
   <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
    <mat-card class="dashboard-card">
     <mat-card-header>
      <mat-card-title>
        {{card.title}}
      </mat-card-title>
     </mat-card-header>
    <app-graph-area></app-graph-area>
   </mat-card>
  </mat-grid-tile>
 </mat-grid-list>
</div>

home.component.ts

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return [
          { title: 'Card 1', cols: 2, rows: 1 },
          { title: 'Card 2', cols: 2, rows: 1 },
          { title: 'Card 3', cols: 2, rows: 1 },
          { title: 'Card 4', cols: 2, rows: 1 }
        ];
      }
      return [
        { title: 'Card 1', cols: 2, rows: 1 },
        { title: 'Card 2', cols: 1, rows: 1 },
        { title: 'Card 3', cols: 1, rows: 2 },
        { title: 'Card 4', cols: 1, rows: 1 }
      ];
    })
  );
  constructor(private breakpointObserver: BreakpointObserver) {}
}

你能帮助我吗 ？

4

0 回答 0