Question

我正在开发一个用户模块，该模块具有用于管理目的的用户视图。我可以看到我的数据，所以工作正常，但我不明白搜索过滤器应该如何工作。以下是我的代码。我是 typeScript 和 Angular 的新手，所以我使用的是在线示例，但失败了。天啊！无论如何，我在搜索过滤器中输入了内容，但没有任何反应。

users.component.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs';
import { Router } from "@angular/router";
import { UserService } from '../../users/user.service';
import { MatInput } from "@angular/material/input";
import { MatSort } from '@angular/material/sort';
import { BehaviorSubject } from "rxjs";
import { Observable } from 'rxjs';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']

})

export class UsersComponent implements OnInit {
  public users: any[] = [];  
  searchControl = new FormControl();
  filteredOptions: Observable<string[]>;  
  MatTableDataSource: Observable<string[]>;

  resetUsers: any;
  @Input() header = "Users View";  
  @Input() columns = [
    { userName : "User Name" },
    { firstName: "First Name" },
    { lastName: "Last Name" },
    { phone: "Phone" }, 
    { email: "Email" },    
  
  ];
  @Input() data: any[]; 
  @ViewChild(MatInput, { static: false }) search: MatInput;
  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  displayData = [];
  
constructor(   
    private userService: UserService,    
    private httpClient: HttpClient
  ) { }

dataSource = new MatTableDataSource<string[]>();
  
 
  ngOnInit(): void {    
    this._getUsers();    
    
  }

  ngAfterViewInit() {
    this.userService.getUsers().subscribe(data => {
      this.users = data.users;  
    });   
    this.search.stateChanges.subscribe(() => {
      this.displayData = [];
      this.users.forEach((entry) => {        
        if (entry.header.toLowerCase().includes(this.search.value.toLowerCase()))
        {
        this.displayData.push(entry);       
        }
      });
    });
  }

  
  
  private _getUsers()
  {    
    this.userService;
    this.userService.getUsers().subscribe(data => {
      this.users = data.users;  
    }); 
  }


}

user.component.html

<form>
  <mat-form-field>
    <div class="search-input">
      
        <mat-label>Search</mat-label>
        <input type="text"
               matInput               
               [matAutocomplete]="auto" />
      
    </div>
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

<div class="users">
  <app-extend-table [header]="header"
                       [data]="users"
                       [columns]="columns">
  </app-extend-table>  
</div>

Answer 1

我不熟悉 Angular Material，但我看到您将过滤后的值推送到 displayData，但 displayData 未在任何地方使用，至少从您显示的代码来看是这样。您可以做的是使用 displayData 作为表格的数据输入：

  <app-extend-table [header]="header"
                   [data]="displayData"
                   [columns]="columns">
  </app-extend-table>

当您获得用户时，您还会提供 displayData：

this.userService.getUsers().subscribe(data => {
  this.users = data.users;  
  this.displayData = data.users; 
});  

this.userService.getUsers().subscribe(data => {
  this.users = data.users;  
  this.displayData = data.users;  
});

另一种方法是创建一个过滤器管道 (https://angular.io/guide/pipes) 来过滤表中的数据，如下所示：过滤器：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "filterTable"
})
export class FilterTablePipe implements PipeTransform {
  constructor() {}

  transform(rows: any[], search: string): any {
    // here you gonna have to create the filter
    // I'm assuming row has a property name, which would be the user name
    return rows.filter(row => row.name.includes(search));
  }
}

在 HTML 上：

  <app-extend-table [header]="header"
                   [data]="users | filterTable: searchValue"
                   [columns]="columns">
  </app-extend-table>

其中 searchValue 是用户键入的值，您必须创建此变量。

这是一个由输入过滤的日期列表的示例。不一样，但可能会帮助您理解：https://stackblitz.com/edit/angular-ivy-filter-date-list?file=src%2Fapp%2Fapp.component.html。

重要提示：您可能需要在更新列表后调用 renderRows (Calling renderRows() on Angular Material Table)。

Answer 2

<div class="search-box-v1">
<app-search from="SEARCH_PRODUCTS"(filterEvent)="applyConfigProductFilter($event)"
(reloadEvent)="refreshConfigProductList($event)">
</app-search> </div>

applyConfigProductFilter(filterValue: string) {
        filterValue = filterValue.trim(); // Remove whitespace
        filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
        this.configProductDataSource.filter = filterValue;
        this.displaySearchRecords = filterValue != '';
}

选择器：'app-search', SearchComponent

如果您需要以下组件，那么我肯定会与您分享。

表搜索过滤器不起作用，Angular 10

2 个答案: