在 angular material 个卡片中显示不同的内容

Question

我正在尝试重新创建此设计：

我希望此仪表板根据用户选择的包进行更改（它将位于一个单独的部署页面上，该页面共享用户创建的包）。我正在尝试编写全局变量代码，因此我只需要更改后端（将从 API 获取此数据）并根据结果更改每张卡片的内容。

我似乎想不出办法，很困惑。我试过在线搜索，但我觉得我什至不知道要搜索什么。这是我目前所拥有的：

Angular TypeScript 组件：

import {
  Component,
  OnInit
}

from '@angular/core';
import {
  StatsService
}

from '../stats.service';
@Component( {
  selector: 'app-insight', templateUrl: './insight.component.html', styleUrls: ['./insight.component.scss']
}

) export class InsightComponent implements OnInit {
  packageStats= {}
  ;
  constructor(private stats: StatsService) {}
  ;
  ngOnInit() {
    this.packageStats=this.getPackageStats();
  }
  getPackageStats() {
    return this.stats.getStats().packageA;
  }
}

后端 TypeScript JSON 文件组件：

export const insightStats = {
    packageA: {
        cardHeader: [
          {
            title:'Cost Entity Summary'
            // description: ''
          },
          {
            title: 'Cost Over Time',
            description: 'Cost for last day'
          },
          {
            title: 'Asset Controller',
            description: 'Number of Running Instances'
          },
          {
            title: 'Unused RI Detector',
            description: 'Number of unused Reserved Instances'
          },
          {
            title: 'Cost By Service',
            description: 'Last 30 days'
          },
          {
            title: 'Potential Savings',
            description: 'Instance Type Pricing Recommendations'
          },
          {
            title: 'Compute Instances - Daily Trend',
            description: 'Last 30 days'
          },
          {
            title: 'Storage by Department'
            // description: ''
          },
        ],
        cardBody: [
          {
            mainText: 10,
            subText: 54
          },
          {
            mainText: 53,
            subChart_type: 'line',
            subChart_data: [65, 59, 80, 81, 56, 55, 40],
            subChart_desc: 'Cost trend for the last 30 days'
          },
          {
            mainText: 228,
            subChart_type: 'line',
            subChart_data: [65, 82, 120, 10, 20, 910, 2],
            subChart_desc: 'Usage trend for the last 30 days'
          },
          {
            mainText: 0
          },
          {
            mainChart_type: 'pie',
            mainChart_data: [47.6, 35.8, 13, 3],
          },
          {
            mainChart_type: 'pie',
            mainChart_data: [24.5, 18.6, 13.9, 8.1, 1.3]
          },
          {
            mainChart_type: 'line',
            mainChart_data: [65, 82, 120, 10, 20, 910, 2]
          },
          {
            mainChart_type: 'pie',
            mainChart_data: [100]
          }
        ]
    }
  }

HTML 分量：

<mat-card>
    <mat-card-title fxLayout="row" fxLayoutAlign="space-between center">
        <span>Management Dashboard</span>
        <div fxLayout="row">
            <button mat-flat-button>Default</button>
            <mat-icon>star</mat-icon>
        </div>
    </mat-card-title>
    <mat-card-content>
<div fxLayout="row wrap" fxLayoutAlign="space-between">
    <mat-card class="insight-cards" fxLayout="column" fxLayoutAlign="center center" fxFlex="0 0 calc(25% - 12px)" [ngStyle.gt-xs]="{'margin.px': 6 }" fxFlex.xs="0 0 100%" [ngStyle.xs]="{'margin-bottom.px': 10 }">
        <mat-card-title fxLayout="row" fxLayoutAlign="space-between center" class="insight-cards-title" *ngFor="let header of packageStats.cardHeader">
            <span>{{header.title}}</span>
            <mat-icon style="cursor: pointer;">info</mat-icon>
        </mat-card-title>
        <mat-card-content style="padding:10px" *ngFor="let body of packageStats.cardBody">

        <h2 *ngIf="body.hasOwnProperty('mainText')">{{body.mainText}}</h2>
        <h4 *ngIf="body.hasOwnProperty('subText')">{{body.subText}}</h4>
        </mat-card-content>
    </mat-card>
</div>

</mat-card-content>
</mat-card>

Answer 1

现在您有单独的 ngFor 卡片标题和内容标签循环。相反，您应该在（内部）mat-card 元素上放置一个 ngFor。

如果您无法更改后端以将每张卡的 header 和 body 合并，您可以转换组件文件中的数据。

<mat-card>
    <mat-card-title fxLayout="row" fxLayoutAlign="space-between center">
        <span>Management Dashboard</span>
        <div fxLayout="row">
            <button mat-flat-button>Default</button>
            <mat-icon>star</mat-icon>
        </div>
    </mat-card-title>
    <mat-card-content>
        <div fxLayout="row wrap" fxLayoutAlign="space-between">
            <mat-card *ngFor="let cardData of statCards"
                      class="insight-cards" fxLayout="column"
                      fxLayoutAlign="center center"
                      fxFlex="0 0 calc(25% - 12px)" [ngStyle.gt-xs]="{'margin.px': 6 }" fxFlex.xs="0 0 100%"
                      [ngStyle.xs]="{'margin-bottom.px': 10 }">
                <mat-card-title fxLayout="row" fxLayoutAlign="space-between center" class="insight-cards-title">
                    <span>{{cardData.header.title}}</span>
                    <mat-icon style="cursor: pointer;">info</mat-icon>
                </mat-card-title>
                <mat-card-content style="padding:10px">

                    <h2 *ngIf="cardData.body.hasOwnProperty('mainText')">{{cardData.body.mainText}}</h2>
                    <h4 *ngIf="cardData.body.hasOwnProperty('subText')">{{cardData.body.subText}}</h4>
                </mat-card-content>
            </mat-card>
        </div>

    </mat-card-content>
</mat-card>

在 angular material 个卡片中显示不同的内容

Displaying different content in angular material cards

angular-material

angular

angular-material-7