javascript - วิธีการกรองเนื้อหาด้วยการพิมพ์ตัวเลขเองและกรองโดยใช้ angular2

ฉันมีทั้งหมด 4 ช่องเพื่อกรองเนื้อหาของตาราง หากฉันใส่ค่า 2 ค่าในส่วนกรอง มันจะทำงาน แต่หากฉันเพิ่มอีกหนึ่งช่องในนั้น จะไม่มีอันไหนทำงานเลย มีใครช่วยฉันกรองเนื้อหาโดยอิงจากอีเมลและหมายเลขโทรศัพท์ได้บ้าง

HTML: ส่วนบนของโค้ดสำหรับการใช้ตัวกรองข้อมูล:

<ng-select [options]="name" [(ngModel)]="filter.name"></ng-select>
      <ng-select [options]="email" [(ngModel)]="filter.email"></ng-select>
      <input type="number" onKeyPress="if(this.value.length==10) return false;" class="form-textbox input-text" [(ngModel)]="filter.phone_number">
      <ng-select [options]="pinAddress" [(ngModel)]="filter.address"></ng-select>

ท่อที่ใช้กรองตาราง:

<tbody>
          <tr *ngFor="let pin of pins | pinfilter:filter">
            <td>{{pin.name}}</td>
            <td>{{pin.description}}</td>
            <td>{{pin.address}}</td>
            <td>{{pin.website}}</td>
            <td>{{pin.phone_number}}</td>
            <td>{{pin.email}}</td>
            <td>{{pin.comments}}</td>
          </tr>
        </tbody>

TS :

filter.pipe.ts:
/* Tutorial filter to write filter functions for Tutorial*/
import { Pipe, PipeTransform } from '@angular/core';

export class NewPin { 
  public _id:number;
  public user_id:number;
  public name:string;  
  public address:string;
  public phone_number:string;
  public email:string;
  public comments:boolean;
}

@Pipe({
  name: 'pinfilter',
  pure: false
})

export class PinPipe implements PipeTransform { 
  transform(items: NewPin[], filter: NewPin): NewPin[] { 
    if (!items || (!filter.name && !filter.address)) { 
      return items; 
    } 
      return items.filter((item: NewPin) => this.applyFilter(item, filter)); 
  } 

  applyFilter(user: NewPin, filter: NewPin): boolean {
    console.log(filter);
    if (filter.name && filter.address) { 
      if (filter.name == user.name && filter.address == user.address) { 
        return true 
      } else { 
        return false 
      } 
    } else if (filter.name) { 
        if (filter.name == user.name) { 
          return true 
    } else { 
        return false 
      }  
    } else if (filter.address) { 
      if (filter.address == user.address) { 
        return true 
      } else { 
        return false 
      } 
    } else { 
      return true 
    } 
  } 
}

component.ts:

public filter: NewPin = new NewPin();

คำตอบ #1

คุณจำเป็นต้องเปลี่ยนฟังก์ชัน applyFilter ของคุณเพื่อให้มันตรวจสอบคุณสมบัติของตัวกรองทั้งหมดกับข้อมูลที่ถูกกรอง

ฉันยังขอแนะนำให้ทำให้โครงสร้างง่ายขึ้นเล็กน้อย อย่างเช่นนี้:

  applyFilter(user: NewPin, filter: NewPin): boolean {
    console.log(filter);
    // check all the filters
    if (filter.name && filter.name != user.name) { 
        return false; 
    } 
    if (filter.address && filter.address != user.address) { 
        return false 
    }  
    if (filter.email && filter.email != user.email) { 
        return false; 
    }  
    if (filter.phone_number && filter.phone_number != user.phone_number) { 
        return false;
    }  
    // if the user passes all the filters, show it
    return true; 
  }