问题描述
今天,我正在尝试学习使用带角度的材料。
但是我在调用组件时遇到了问题。
在这里,我称<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',{ title: 'Card 3',{ title: 'Card 4',rows: 1 }
];
}
return [
{ title: 'Card 1',cols: 1,rows: 2 },rows: 1 }
];
})
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
你能帮我吗?
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)