如何使用Typescript Angular转换和过滤JSON数据？

npm install -g @angular/cli

ng new my-app

cd my-app

ng generate service data

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private jsonData: any; // 定义JSON数据对象

  constructor() { 
    // 加载和解析JSON数据
    this.loadJsonData();
  }

  private loadJsonData() {
    // 使用HTTP请求加载JSON数据文件
    // 你可以使用Angular的HttpClient模块发送HTTP请求
    // 并使用JSON.parse()解析响应数据为对象
  }

  public getFilteredData(filter: string): any[] {
    // 过滤JSON数据
    // 使用Array的filter()方法根据条件过滤数据
    // 返回过滤后的数据
    return this.jsonData.filter((item: any) => {
      // 在这里定义你的过滤条件
    });
  }
}

import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  template: `
    <ul>
      <li *ngFor="let item of filteredData">{{ item.name }}</li>
    </ul>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  filteredData: any[];

  constructor(private dataService: DataService) {
    // 调用数据服务的getFilteredData()方法，并传入过滤条件
    this.filteredData = this.dataService.getFilteredData('filter condition');
  }
}