Angular中如何将Service里的Mock数据渲染展示到HTML页面上

1. 先完善ProductService的基础配置 #

你当前的Service缺少Angular必须的@Injectable装饰器，同时需要明确定义ProductSuite类型，修改后的product-suite.service.ts代码如下：

// 先定义ProductSuite数据类型
export interface ProductSuite {
  id: number;
  title: string;
  description: string;
}

@Injectable({
  // 全局单例注入，不用再额外在模块/组件声明providers
  providedIn: 'root'
})
export class ProductService {
  productsuite: ProductSuite[] = [
    {
      id: 1,
      title: '90,346',
      // 如果要和原HTML文案一致，可以改成"Users Right Now"
      description: 'Users Right Now',
    },
    {
      id: 2,
      title: '250++',
      description: 'Saved',
    },
    {
      id: 3,
      title: '$34.5 mill',
      description: 'New User per Week',
    },
  ];
}

2. 修正组件TS的代码逻辑 #

你当前的组件代码有变量类型错误、生命周期钩子拼写错误，也没有正确注入Service，修改后的代码如下：

import { OnInit } from '@angular/core';
import { ProductService, ProductSuite } from '../../data/product-suite.service';

export class MaxisProductSuiteComponent implements OnInit {
  // 用来存储从Service拿到的KPI数据
  kpiList: ProductSuite[] = [];

  // 依赖注入ProductService
  constructor(private productService: ProductService) {}

  ngOnInit(){
    // 组件初始化时读取Service里的Mock数据
    this.kpiList = this.productService.productsuite;
  }
}

3. 替换HTML中的硬编码内容为循环渲染 #

把原来写死的三个KPI容器替换为Angular的*ngFor循环结构，直接遍历kpiList渲染即可：

<div class="container2">
  <div class="header" style="height: 400px">
    <div class="content3">
      <!-- 循环遍历kpiList渲染每个KPI项 -->
      <div *ngFor="let kpi of kpiList">
        <h1 class="kpi-title">{{kpi.title}}</h1>
        <p class="kpi-des">{{kpi.description}}</p>
      </div>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user9436741