Angular -如何根据选择中的选项更改从JSONA下载的数据

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <select [formControl]="selectedOption">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>

    <ul>
      <li *ngFor="let item of filteredData">{{ item.name }}</li>
    </ul>
  `,
})
export class AppComponent {
  data: any[]; // 存储从JSON下载的数据
  filteredData: any[]; // 存储根据选项过滤后的数据
  selectedOption = new FormControl(); // 存储选中的选项

  constructor(private http: HttpClient) {
    this.loadData();
    this.selectedOption.valueChanges.subscribe(() => {
      this.filterData();
    });
  }

  loadData() {
    this.http.get<any[]>('https://example.com/data.json').subscribe((response) => {
      this.data = response;
      this.filterData();
    });
  }

  filterData() {
    const selectedOption = this.selectedOption.value;
    this.filteredData = this.data.filter((item) => item.option === selectedOption);
  }
}