解决方法如下:
npm install @angular/core @angular/forms @ng-bootstrap/ng-bootstrap
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule, NgbModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
ID
姓名
性别
{{ person.id }}
{{ person.name }}
{{ person.gender }}
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
selectedFilter: string = "all";
people: any[] = [
{ id: 1, name: "张三", gender: "male" },
{ id: 2, name: "李四", gender: "female" },
{ id: 3, name: "王五", gender: "male" },
{ id: 4, name: "赵六", gender: "female" }
];
get filteredPeople() {
if (this.selectedFilter === "all") {
return this.people;
}
return this.people.filter(person => person.gender === this.selectedFilter);
}
}
这样,你就可以根据下拉列表的选择来过滤表格中的值了。