角度过滤多个无序词

Question

在我的代码中，我试图从列表中过滤元素，并且在我一次写多个单词时尝试过滤该元素。现在，如果我按正确的顺序写单词，我可以过滤元素。例如;如果我写'red book'，我可以过滤'red book love' 元素，但我也想在写'red love' 时过滤它。这是我的代码，我应该怎么做才能实现我想要的？

HTML：

 <mat-form-field appearance="outline" fxFlex="100" class="w-100-p pr-8">
            <mat-label>Product</mat-label>
            <input type="text" required matInput [(ngModel)]="product" name="product"
                (input)="onProductSearchChange($event.target.value)" [matAutocomplete]="autoProductId">
            <button mat-button matSuffix mat-icon-button aria-label="Clear" (click)="product = null" type="button">
                <mat-icon>block</mat-icon>
            </button>
            <mat-autocomplete autoActiveFirstOption #autoProductId="matAutocomplete"
                [displayWith]="displayProduct.bind(this)" (optionSelected)="filterProduct($event.option.value)">
                <mat-option *ngFor="let prm of productList" [value]="prm">
                    {{prm?.StockIntegrationCode +' '+ prm?.ProductName}}
                </mat-option>
            </mat-autocomplete>
        </mat-form-field>

TS：

onProductSearchChange(search: string) {
    let filterValue = (search as any).toLocaleLowerCase("tr");
    if (
        this._adminService.products &&
        this._adminService.products.length > 0
    ) {
        this.productList = this._adminService.products.filter(
            (x) =>
                x.StockIntegrationCode.indexOf(filterValue) >= 0 ||
                (x.ProductName as any)
                    .toLocaleLowerCase("tr")
                    .indexOf(filterValue) >= 0
        );
    }
    if (!search) {
        this.product = null;
        this.productList = this._adminService.products;
    }
}

displayProduct(product: IProduct): string | undefined {
    return product
        ? product.StockIntegrationCode + " - " + product.ProductName
        : "";
}

Answer 1

我不知道您是希望所有单词都匹配，还是只匹配其中一个单词，所以这里有两种解决方案。我也不知道股票集成代码是什么，所以我假设代码或名称中是否存在匹配项。

只有一个字匹配

  onProductSearchChange(search: string) {
    if (!search) {
      this.product = null;
      this.productList = this._adminService.products;
      return; //Return because the string is empty
    }
    let filterValue = search.toLocaleLowerCase('tr');
    let values = filterValue.split(' ');
    if (this._adminService.products && this._adminService.products.length > 0) {
      this.productList = this._adminService.products.filter((x) => {
        for (const value of values) {
          if (
            x.StockIntegrationCode.includes(value) ||
            x.ProductName.toLocaleLowerCase('tr').includes(value)
          )
            return true;
        }
        return false;
      });
    }
  }

所有单词匹配

  onProductSearchChange(search: string) {
    if (!search) {
      this.product = null;
      this.productList = this._adminService.products;
      return; //Return because the string is empty
    }
    let filterValue = search.toLocaleLowerCase('tr');
    let values = filterValue.split(' ');
    if (this._adminService.products && this._adminService.products.length > 0) {
      this.productList = this._adminService.products.filter((x) => {
        for (const value of values) {
          if (
            !x.StockIntegrationCode.includes(value) &&
            !x.ProductName.toLocaleLowerCase('tr').includes(value)
          )
            return false;
        }
        return true;
      });
    }
  }

我只是将 filterValue 拆分为空格，然后逐字搜索。