以下是一个使用Angular 8从JSON服务器获取数据并使用复选框在表中筛选数据的解决方法,包含代码示例:
data.service.ts
的服务,用于从JSON服务器获取数据:import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'http://json-server-url/data'; // 替换为实际的JSON服务器URL
constructor(private http: HttpClient) { }
getData(): Observable {
return this.http.get(this.apiUrl);
}
}
filter.component.ts
的组件,用于显示复选框和过滤数据:import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
@Component({
selector: 'app-filter',
templateUrl: './filter.component.html',
styleUrls: ['./filter.component.css']
})
export class FilterComponent implements OnInit {
data: any[];
filteredData: any[];
selectedFilters: string[] = [];
constructor(private dataService: DataService) { }
ngOnInit() {
this.dataService.getData().subscribe(data => {
this.data = data;
this.filteredData = data;
});
}
filterData() {
this.filteredData = this.data.filter(item => {
return this.selectedFilters.includes(item.category);
});
}
}
filter.component.html
的HTML模板文件,用于显示复选框和表格:Filter Data
Category 1
Category 2
Category 3
Name
Category
{{ item.name }}
{{ item.category }}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { FilterComponent } from './filter.component';
import { DataService } from '../data.service';
@NgModule({
declarations: [FilterComponent],
imports: [
CommonModule,
FormsModule,
HttpClientModule
],
providers: [DataService]
})
export class FilterModule { }
来显示过滤组件。这样,当用户选择复选框时,数据将根据所选的过滤器进行过滤,并只显示符合条件的数据。