Angular Material Table自己的数据源，带有过滤方法 [英] Angular Material Table own datasource with filter method

问题描述

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

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.

代码MyDataSource

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')
      );
   }
}

api提供了可观察到的用户对象.

The api delivers an observable with user objects.

代码用户

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()))

此行给我以下错误:用户和未定义toLocaleLowerCase

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

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

给我未定义".

感谢您的帮助，

最好的问候

推荐答案

@Pierre Mallet您的过滤器解决方案有效，但是我真的不知道在哪里打电话

@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.

我的实际代码

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')
      );
  }
}

感谢您的帮助.

最诚挚的问候.

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