表搜索過濾器不起作用，Angular 10

Question

我正在開發一個用戶模塊，該模塊具有用於管理目的的用戶視圖。 我可以看到我的數據，所以工作正常，但我不明白搜索過濾器應該如何工作。 以下是我的代碼。 我是 typeScript 和 Angular 的新手，所以我使用的是在線示例，但失敗了。 SMH，無論如何。 我在搜索過濾器中輸入，沒有任何反應。

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 材料，但我看到您正在將過濾后的值推送到 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;  
}); 

另一種方法是創建一個過濾器 pipe ( 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（在 Angular 材料表上調用 renderRows() ）。

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

如果您需要以下組件，那么我一定會與您分享。