如何通过点击传递参数筛选并获取JSON数据文件？

看起来你想在Angular组件里实现「点击按钮传递参数，然后筛选对应JSON文件的数据」的功能，结合你给出的两个JSON文件和组件代码片段，我给你整理了完整的实现方案：

第一步：完善组件模板（form.component.html） #

先在模板里添加触发点击的按钮，并预留筛选结果的展示区域：

<!-- 绑定点击事件，传递不同的筛选参数 -->
<button (click)="filterTestData(1)">筛选ID=1的Home数据</button>
<button (click)="filterTestData(2)">筛选ID=2的Test数据</button>
<button (click)="filterTest2Data(1)">筛选分类ID=1的Test2数据</button>
<button (click)="filterTest2Data(2)">筛选分类ID=2的Test1数据</button>

<!-- 展示筛选后的结果 -->
<div class="result-section">
  <h3>Test.json 筛选结果</h3>
  <ul *ngIf="filteredTestData.length">
    <li *ngFor="let item of filteredTestData">
      {{ item.name }} (ID: {{ item.id }})
    </li>
  </ul>
  <p *ngIf="!filteredTestData.length">暂无匹配数据</p>
</div>

<div class="result-section">
  <h3>Test2.json 筛选结果</h3>
  <ul *ngIf="filteredTest2Data.length">
    <li *ngFor="let item of filteredTest2Data">
      {{ item.name }} (分类ID: {{ item['id-cat'] }})
    </li>
  </ul>
  <p *ngIf="!filteredTest2Data.length">暂无匹配数据</p>
</div>

第二步：完善组件逻辑（form.component.ts） #

我帮你补全了组件代码，实现「点击加载JSON + 参数筛选」的逻辑，同时兼容你原有的Http依赖（也给你补充了Angular新版本推荐的HttpClient用法）：

基于你原有的Http的实现：

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { ButtonComponent } from '../atomic/button.component';
// 导入RxJS操作符
import 'rxjs/add/operator/map';

@Component({
  templateUrl: 'form.component.html',
  styleUrls: ['form.component.scss']
})
export class FormComponent {
  // 存储原始JSON数据
  testData: Object[] = [];
  test2Data: Object[] = [];
  // 存储筛选后的结果
  filteredTestData: Object[] = [];
  filteredTest2Data: Object[] = [];

  constructor(private http: Http) {}

  // 处理test.json的筛选请求
  filterTestData(targetId: number) {
    // 请求test.json文件（假设文件放在assets目录下）
    this.http.get('./assets/test.json')
      .map(response => response.json())
      .subscribe(
        (data) => {
          this.testData = data;
          // 根据传递的ID参数筛选数据
          this.filteredTestData = data.filter(item => item['id'] === targetId);
        },
        (error) => {
          console.error('加载test.json失败:', error);
        }
      );
  }

  // 处理test2.json的筛选请求
  filterTest2Data(targetCatId: number) {
    this.http.get('./assets/test2.json')
      .map(response => response.json())
      .subscribe(
        (data) => {
          this.test2Data = data;
          // 根据传递的分类ID参数筛选数据
          this.filteredTest2Data = data.filter(item => item['id-cat'] === targetCatId);
        },
        (error) => {
          console.error('加载test2.json失败:', error);
        }
      );
  }
}

（推荐）Angular 6+ 用HttpClient的优化实现：

Http在Angular新版本中已被废弃，推荐使用HttpClient，代码更简洁：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // 替换成HttpClient
import { ButtonComponent } from '../atomic/button.component';

@Component({
  templateUrl: 'form.component.html',
  styleUrls: ['form.component.scss']
})
export class FormComponent {
  testData: Object[] = [];
  test2Data: Object[] = [];
  filteredTestData: Object[] = [];
  filteredTest2Data: Object[] = [];

  constructor(private http: HttpClient) {}

  filterTestData(targetId: number) {
    // HttpClient自动解析JSON，无需map操作
    this.http.get<Object[]>('./assets/test.json')
      .subscribe(
        (data) => {
          this.testData = data;
          this.filteredTestData = data.filter(item => item['id'] === targetId);
        },
        (error) => {
          console.error('加载test.json失败:', error);
        }
      );
  }

  filterTest2Data(targetCatId: number) {
    this.http.get<Object[]>('./assets/test2.json')
      .subscribe(
        (data) => {
          this.test2Data = data;
          this.filteredTest2Data = data.filter(item => item['id-cat'] === targetCatId);
        },
        (error) => {
          console.error('加载test2.json失败:', error);
        }
      );
  }
}

第三步：可选优化——预加载数据减少请求 #

如果JSON数据不会频繁变动，可以在组件初始化时就加载所有数据，点击时只做筛选，减少HTTP请求次数：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  templateUrl: 'form.component.html',
  styleUrls: ['form.component.scss']
})
export class FormComponent implements OnInit {
  testData: Object[] = [];
  test2Data: Object[] = [];
  filteredTestData: Object[] = [];
  filteredTest2Data: Object[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // 初始化时预加载所有JSON数据
    this.http.get<Object[]>('./assets/test.json').subscribe(data => this.testData = data);
    this.http.get<Object[]>('./assets/test2.json').subscribe(data => this.test2Data = data);
  }

  filterTestData(targetId: number) {
    if (!this.testData.length) {
      console.warn('Test数据还未加载完成，请稍后再试');
      return;
    }
    this.filteredTestData = this.testData.filter(item => item['id'] === targetId);
  }

  filterTest2Data(targetCatId: number) {
    if (!this.test2Data.length) {
      console.warn('Test2数据还未加载完成，请稍后再试');
      return;
    }
    this.filteredTest2Data = this.test2Data.filter(item => item['id-cat'] === targetCatId);
  }
}

注意事项 #

• 确保JSON文件的路径正确：一般Angular项目会把静态资源放在src/assets目录下，所以请求路径用./assets/test.json即可
• 如果用HttpClient，需要在AppModule中导入HttpClientModule并添加到imports数组里

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