带有过滤方法的角度材料表自己的数据源 [英] Angular Material Table own datasource with filter method

问题描述

在此教程的帮助下，我编写了自己的角度材料表的数据源.我从 api 获取数据列表并将其显示在材料表中.

代码我的数据源

export class MyDataSource extends DataSource;{私人用户:Observable;构造函数(私有用户服务:用户服务){极好的();}connect(): Observable{this.users = this.userService.getAll();返回 this.users;}断开连接(){}filterWithCriteria(filterData: any): any {返回 this.users.filter(element => element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase())).map(元素 => 元素).订阅(元素 =>控制台日志(元素)，错误 =>控制台错误(错误)，() =>console.log('流媒体结束'));}}

该 API 提供了一个带有用户对象的 observable.

代码用户

export class User 实现models.User {构造函数(公共名称?:字符串，公共地址?:字符串，公共电子邮件?:字符串，公共电话?:字符串，公众生日?:日期) {}}

目标是在具有条件的用户列表中进行搜索.条件可以是姓名、地址、...

<块引用>

.filter(element => element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))

这一行给我的错误是 toLocaleLowerCase 没有在 User 中定义，

<块引用>

 console.log(this.users[filterData.criteria]);

给我'未定义'.

感谢您的帮助，

最好的问候

解决方案

@Pierre Mallet 您的过滤器解决方案有效，但我真的不知道该从哪里调用

<块引用>

this.filter$.next({criteria: <theCriteria>, searchTerm: <theTerm>});

由于选择了有棱角的材料，我做了一些改动.

我的实际代码

import { Component, OnInit } from '@angular/core';从 'rxjs/Observable' 导入 { Observable };导入 'rxjs/add/operator/map';导入 'rxjs/add/operator/filter';导入 'rxjs/add/observable/combineLatest';从@angular/cdk/collections"导入{数据源}；从'../shared/service/user.service'导入{用户服务}；从'../shared/user'导入{用户}；import { TransponderFormComponent } from '../transponder-form/transponder-form.component';从'rxjs/BehaviorSubject'导入{BehaviorSubject}；@成分({选择器:'app-transponder-list'，templateUrl: './transponder-list.component.html',styleUrls: ['./transponder-list.component.scss']})导出类 TransponderListComponent 实现 OnInit {公共用户:用户[]；public displayColumns = ['name', 'adress', 'city', 'email', 'telephon', '生日'];公共数据源；公共选择条件:字符串 = '';公共搜索标准 = [{值:'姓名'，视图:'姓名'}，{值:'城市'，视图:'城市'}，{值:'地址'，视图:'地址'}，{ value: 'email', view: 'Email' },{值:'电话'，视图:'电话'}，{ 值:'生日'，视图:'生日' }];构造函数(私有用户服务:用户服务){}ngOnInit() {this.dataSource = new MyDataSource(this.userService);}//从材质选择中获取数据公共 setSearchCriteria() { }公共过滤器(数据:任何){this.dataSource.filter(data.searchTerm, this.selectedColumn);}}导出类 MyDataSource 扩展了 DataSource{私人用户:Observable;private filter$ = new BehaviorSubject({ 条件:null，searchTerm:null });构造函数(私有用户服务:用户服务){极好的();}connect(): Observable{this.users = this.userService.getAll();返回 Observable.combineLatest(this.userService.getAll(), this.filter$).map(latestValues => {const [users, filterData] = latestValues;//改变如果 (!filterData.criteria || !filterData.searchTerm) {回访用户；}返回 users.filter(user => {返回用户[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase());});});}断开连接(){}过滤器(搜索词:字符串，条件:字符串){if (searchTerm !== '') {//有一个要搜索的 ternif ((标准 !== 未定义) && (标准 !== '')) {console.log('用术语和条件搜索');this.filterWithCriteria(searchTerm, 标准);}}}filterWithCriteria(searchTerm: String, criteria: any): any {返回 this.users.map((用户:用户[]) => {返回 users.filter(user => {返回用户[标准].toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase());});}).订阅(用户 =>控制台日志(用户)，错误 =>控制台错误(错误)，() =>console.log('流媒体结束'));}}

感谢您的帮助.

最好的问候.

With the help of this tutorial I wrote my own datasource for the angular material table. I get the list of data from an api and display it in a material table.

Code MyDataSource

export class MyDataSource extends DataSource<any> {

  private users: Observable<User[]>;

  constructor(private userService: UserService) {
    super();
  }

  connect(): Observable<User[]> {
    this.users = this.userService.getAll();
    return this.users;
  }

  disconnect() { }

  filterWithCriteria(filterData: any): any {
    return this.users
      .filter(element => element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))
      .map(element => element)
      .subscribe(
        element => console.log(element),
        err => console.error(err),
        () => console.log('Streaming is over')
      );
   }
}

The api delivers an observable with user objects.

Code User

export class User implements models.User {
  constructor(
    public name?: string,
    public adress?: string,
    public email?: string,
    public telefon?: string,
    public birthday?: Date
  ) {}
}

The objective is to search in the list of the user with a criteria. The criteria can be name, adress, ...

.filter(element => element[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase()))

This line gives me the error the toLocaleLowerCase is not defined in User and

 console.log(this.users[filterData.criteria]);

gives me 'undefined'.

Thanks for the help,

Best Regards

解决方案

@Pierre Mallet your filter solution works, but I don't really know where to call

this.filter$.next({criteria: <theCriteria>, searchTerm: <theTerm>});

and I did a little change because of the angular material select.

My actual code

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/observable/combineLatest';
import { DataSource } from '@angular/cdk/collections';
import { UserService } from '../shared/service/user.service';
import { User } from '../shared/user';
import { TransponderFormComponent } from '../transponder-form/transponder-form.component';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Component({
  selector: 'app-transponder-list',
  templateUrl: './transponder-list.component.html',
  styleUrls: ['./transponder-list.component.scss']
})

export class TransponderListComponent implements OnInit {

  public users: User[];
  public displayedColumns = ['name', 'adress', 'city', 'email', 'telephon', 'birthday'];
  public dataSource;
  public selectedCriteria: String = '';

  public searchCriteria = [
    { value: 'name', view: 'Name' },
    { value: 'city', view: 'City' },
    { value: 'adress', view: 'Adress' },
    { value: 'email', view: 'Email' },
    { value: 'telephon', view: 'Telephon' },
    { value: 'birthday', view: 'Birthday' }
  ];

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.dataSource = new MyDataSource(this.userService);
  }

  // get data from material select
  public setSearchCriteria() { }

  public filter(data: any) {
    this.dataSource.filter(data.searchTerm, this.selectedColumn);
  }
}

export class MyDataSource extends DataSource<any> {

  private users: Observable<User[]>;
  private filter$ = new BehaviorSubject({ criteria: null, searchTerm: null });

  constructor(private userService: UserService) {
    super();
  }

  connect(): Observable<User[]> {
    this.users = this.userService.getAll();
    return Observable.combineLatest(this.userService.getAll(), this.filter$)
      .map(latestValues => {
         const [users, filterData] = latestValues; // change
         if (!filterData.criteria || !filterData.searchTerm) {
           return users;
         }
         return users.filter(user => {
           return user[filterData.criteria].toLocaleLowerCase().includes(filterData.searchTerm.toLocaleLowerCase());
         });
       });
  }

  disconnect() { }

  filter(searchTerm: String, criteria: String) {
    if (searchTerm !== '') {
      // there is a tern to search
      if ((criteria !== undefined) && (criteria !== '')) {
        console.log('Search with term and criteria');
        this.filterWithCriteria(searchTerm, criteria);
      }
    }
  }

  filterWithCriteria(searchTerm: String, criteria: any): any {
    return this.users
      .map((users: User[]) => {
        return users.filter(user => {
          return user[criteria].toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase());
        });
      })
      .subscribe(
        users => console.log(users),
        err => console.error(err),
        () => console.log('Streaming is over')
      );
  }
}

Thanks for your help.

Best regards.

这篇关于带有过滤方法的角度材料表自己的数据源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！