Question

我正在尝试为我的结果创建一个布尔过滤器，由有财务债务的用户和没有财务债务的用户组成，但我迷路了，只是不知道该怎么做。

搜索管道（使用文本搜索）

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(tenants:Tenant[], searchTerm : string): Tenant[] {
    if(!tenants || !searchTerm){
      return tenants;
    }
    return tenants.filter(tenant => 
      tenant.name.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase()) !== -1);
  }
}

ngOnInit() {
  this.userService.getAllTenants().subscribe((data:Tenant[])=>{
    this.lstTenants = data.Tenants;
    console.log("Tenants:", this.lstTenants)
  })
}

<div class="small-container">
        <h1>Tenants</h1>
        <button class="add" [routerLink]="['/add']">Add New Tenant</button>
        <input type="search" placeholder="Search Tenants" [(ngModel)]="searchTerm" [ngModelOptions]="{standalone: true}">
        <form>
            <div class="form-group">
                <label>
            <span>Show financial Debt Only</span> 
            <input class="form-control mb-2" type="checkbox" [(ngModel)]="hasFinanacialDebt"  [ngModelOptions]="{standalone: true}" >
        </label>
            </div>
            <div class="form-group">
                <label>
            <span>Show none financial Debt Only</span> 
            <input class="form-control mb-2" type="checkbox" [(ngModel)]="hasntFinanacialDebt"  [ngModelOptions]="{standalone: true}" >
        </label>
            </div>
        </form>

                <tr *ngFor="let tenant of lstTenants | search : searchTerm">
                    <td>{{tenant.name}}</td>
                    <td>{{tenant.phoneNumber}}</td>
                    <td>{{tenant.address}}</td>
                    <td>{{tenant.financialDebt}}</td>
                    </tr>

界面文件

export class Tenant {
    name:String;
    phoneNumber:Number
    address:String;
    financialDebt:Boolean
}

Answer 1

您目前仅将 searchTerm 传递给您的管道。您可以传递多个参数或传递一个包含所有过滤器的对象。

具有多个参数的示例：

C:\>dir MyFile.txt
02/10/2021  10:54 PM                 4 MyFile.txt

C:\>gdate -r MyFile.txt +%Y-%m-%d
2021-02-10

C:\>gdate -r MyFile.txt "+%Y-%m-%d %H:%M:%S"
2021-02-10 22:54:50

C:\>gdate -r MyFile.txt +%s
1613015690

C:\>gdate -r MyFile.txt +%s.%N
1613015690.093962600

@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
  transform(tenants:Tenant[], searchTerm: string, hasFinancialDebt: boolean, hasntFinancialDebt: boolean): Tenant[] {
    if(!tenants){
      return tenants;
    }
    return tenants.filter(tenant =>
      (!searchTerm || tenant.name.toLocaleLowerCase().indexOf(searchTerm.toLocaleLowerCase()) !== -1) &&
      (!hasFinancialDebt || tenant.financialDebt) &&
      (!hasntFinancialDebt|| !tenant.financialDebt));
  }
}

Answer 2

尝试使用：

pipe

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

@Pipe({
  name: "filter"
})
export class FilterPipe implements PipeTransform {
  transform(data: any, key: string, financial: any, non_financial: any): any {
    if (!data || data.length === 0) {
      return [];
    }
    console.log(key,financial,non_financial)

    return data.filter(item => (item[key] == financial || item[key] == non_financial));
  }
}

而您的*ngFor需要像这样

*ngFor="let user of lstTenants | filter:'financialDebt':financial:nonFinancial"

app.component.html

<div class="container" style="margin-top: 40px;">
    <input type="checkbox" id="financial" (change)="setFinancial($event)"/>
    <label style="margin-left: 10px;" >Financial Dept Users</label>
    <hr>
    <input type="checkbox" id="not_financial" (change)="setFinancial($event)"/>
    <label style="margin-left: 10px;">Not Financial Dept Users</label>
    <hr>
    <table class="table">
        <thead>
            <tr>
                <th>Address</th>
                <th>Created At</th>
                <th>Financial Debt</th>
            </tr>
        </thead>
        <tr *ngFor="let user of lstTenants | filter:'financialDebt':financial:nonFinancial">
            <td>{{user.address}}</td>
            <td>{{user.createdAt}}</td>
            <td>{{user.financialDebt}}</td>
        </tr>
    </table>
</div>

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  financial = true;
  nonFinancial = false;
  lstTenants = [
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false },
    { address: "Adam", createdAt: "Passed", financialDebt: true },
    { address: "Adam", createdAt: "Passed", financialDebt: false }
  ];

  setFinancial(evt) {
    if (evt.target.id == "financial") this.nonFinancial = evt.target.checked;
    else this.financial = !evt.target.checked;
  }
}

这里是 stackblitz 示例：

https://stackblitz.com/edit/angular-array-pipes-j23kb1?file=src/app/app.component.html

希望这会有所帮助:)

Angular8 复选框布尔过滤器

2 个答案: