Angular 2-如何过滤select

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' },
    // 更多...
  ];

  filter = '';

  get filteredItems() {
    return this.items.filter(item => item.name.toLowerCase().includes(this.filter.toLowerCase()));
  }
}

<!-- app.component.html -->
<input type="text" [(ngModel)]="filter" placeholder="Filter items...">
<select>
  <option *ngFor="let item of filteredItems" [value]="item.id">{{ item.name }}</option>
</select>

// filter.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(item => {
      return item.name.toLowerCase().includes(searchText);
    });
  }
}

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { FilterPipe } from './filter.pipe';

@NgModule({
  declarations: [
    AppComponent,
    FilterPipe
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<!-- app.component.html -->
<input type="text" [(ngModel)]="filter" placeholder="Filter items...">
<select>
  <option *ngFor="let item of items | filter:filter" [value]="item.id">{{ item.name }}</option>
</select>

// 在组件中
trackByFn(index: number, item: any): number {
  return item.id; // 或者任何唯一的标识符
}

<!-- 在模板中 -->
<option *ngFor="let item of filteredItems; trackBy: trackByFn" [value]="item.id">{{ item.name }}</option>