如何在 Angular 中显示 html 中的模拟数据

Question

我已经创建了模拟服务文件，我想在我的 html 中显示，但不确定如何正确显示它，所以如果我能得到任何帮助或建议，我将不胜感激。

<div class="container2">
  <div class="header" style="height: 400px">
    <div class="content3">
      <div>
        <h1 class="kpi-title">90,346</h1>.     // I'm trying to remove this hard code html
        <p class="kpi-des">Users Right Now</p> // and display it from my mock data file.
      </div>
      <div>
        <h1 class="kpi-title">250++l</h1>
        <p class="kpi-des">Saved</p>
      </div>
      <div>
        <h1 class="kpi-title">.5 mill</h1>
        <p class="kpi-des">New User per Week</p>
      </div>
    </div>
  </div>
</div>

TS

import { ProductService } from '../../data/product-suite.service';

export class MaxisProductSuiteComponent {
  productService: ProductService[];

ngOnIT(){
}

产品-suite.service.ts

export class ProductService {
  productsuite: ProductSuite[] = [
    {
      id: 1,
      title: '90,346',
      description: 'Users',
    },
    {
      id: 2,
      title: '.5 mill',
      description: 'Saved',
    },
    {
      id: 3,
      title: '250++',
      description: 'New User per Week',
    },
  ];
}

Answer 1

在模块提供程序中创建您的服务或使其可注入“root”。
在您的组件中注入您想要在构造函数中显示数据的服务作为依赖注入。
使用 productService 分配您的组件变量数组。
在您的 HTML 循环中使用 *ngFor=" let product of products" 循环您的数据数组。
在插值中使用您的乘积值 {{ product.id }}。

Answer 2

请为您的解决方案找到以下代码：

创建名称为 output.json 的 json 文件资产文件夹。

 {
 "result" : [
     {
         "id": 1,
         "title": "90,346",
         "description": "Users at Ford"
     },
     {
         "id": 2,
         "title": ".5 mill",
         "description": "Saved for Ford"
     },
     {
         "id": 3,
         "title": "250++",
         "description": "New User per Week"
     },
     {
         "id": 4,
         "title": "64%",
         "description": "Users At Ford"
     }
 ]

}

在服务文件中写入以下代码：

    import { observable, Observable } from "rxjs";
    import { MaxisProductSuite } from "src/Model/model";
    import { HttpClient } from '@angular/common/http'; 
    import { Injectable } from "@angular/core";
    
    @Injectable()
    export class MaxisProductService {
      constructor(private http: HttpClient){}
    
      getAllMaxisps():Observable<MaxisProductSuite> {
        return this.http.get<MaxisProductSuite>("./assets/output.json");
      }
    }

然后组件文件添加以下代码：

    import { DOCUMENT } from '@angular/common';
    import { Component, Inject, OnInit } from '@angular/core';
    import { MaxisProductSuite } from 'src/Model/model';
    import { MaxisProductService } from 'src/service/MaxisProductService';
    
    @Component({
      selector: 'app-temp',
      templateUrl: './temp.component.html',
      styleUrls: ['./temp.component.scss']
    })
    export class TempComponent implements OnInit {
       maxisps: MaxisProductSuite[];
       public resultData:MaxisProductSuite=null;
    
      constructor(@Inject(DOCUMENT) private document: Document, private service : MaxisProductService) {}
    
      ngOnInit() {
        this.service.getAllMaxisps().subscribe((res:MaxisProductSuite) => {
         console.log(res);
         this.resultData =res;
        });    
      }
    
    }

然后HTMl文件添加以下代码：

 <div *ngFor="let item of resultData?.result">
 <div class="header" style="height: 400px">
   <h1>{{item.id}}</h1>
   <h2>{{item.title}}</h2>
   <h3>{{item.description}}</h3>
 </div>

在模型文件中添加以下模型

    export interface MaxisProductSuite {
        result : Result[]
      }
    
      export interface Result{
        id?: number;
        title: string;
        description: string;
      }

希望对您有所帮助。

乐于助人！

如何在 Angular 中显示 html 中的模拟数据

How to display mock data in html in Angular

html

angular

typescript

mocking

display