การกรองเชิงมุม: ปัญหาเมื่อทำการล้างช่องค้นหา

ฉันมีรายการออบเจ็กต์ที่ฉันกำลังแสดง และฉันเพิ่มช่องค้นหาเพื่อกรองคอลัมน์ ตอนนี้เมื่อฉันป้อนค่า มันก็ทำงานได้ดีและข้อมูลจะถูกกรอง ปัญหาคือ เมื่อฉันล้างช่องค้นหา ฉันไม่ได้รับข้อมูลทั้งหมดกลับมา ฉันยังคงติดอยู่กับสิ่งที่ฉันค้นหาก่อน ดังนั้นฉันจึงต้องรีเฟรชทุกครั้งที่ต้องการเปลี่ยนค่าที่ป้อนหรือรับรายการทั้งหมด

นี่คือรหัส Ts ของฉัน:

export class AdherentsComponent implements OnInit {
  adherents: adherent[];
  name: string;

  constructor(private adherentService: AdherentService, private alertify: AlertifyService) { }

  ngOnInit() {
    this.getAdherents();
    this.name = "";
  }

  getAdherents() {
    this.adherentService.getAdherents().subscribe((
      adherents: adherent[]) => {
      this.adherents = adherents;
    }, error => { this.alertify.error(error); })
  }

  

  Search() {
    if (this.name.length > 0) {
      this.adherents = this.adherents.filter(res => {
        return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
      })
    }
    else if (this.name.length === 0) {
      this.adherents = this.adherents;
      console.log(this.adherents.length);
    }
  }



}

นี่คือรหัส Html ของฉัน:

<body >
<main role="main" class="container" >
<div  class="jumbotron" style="background-color: white;">
  <h2>Liste des Adhérents</h2>
  <input type="text" [(ngModel)]="name" (input)="Search()" />  
  <table class="table table-hover">
    <thead class="thead-light">
<tr>
   <th>Nom Complet</th>
   <th>Grade</th>
   <th>Poste</th>
   <th>Telephone</th>
   <th>E-mail</th>
   <th></th>
 </tr>
 </thead>

     <tr *ngFor="let item of adherents">
       <td>{{item.nomcomplet}}</td>
       <td>{{item.grade}}</td>
       <td>{{item.poste}}</td>
       <td>{{item.telephone}}</td>
       <td>{{item.email}}</td>
       <td><button [routerLink]="['/adherents/', item.id]" style="margin-right: 0.2em;" title="Details" class="btn-sm btn-secondary text-white"><i class="fa fa-eye"></i></button>
        <button [routerLink]="['/adherentEdit/', item.id]"
        style="margin-right: 0.2em;" title="Modifier" class="btn-sm btn-primary text-white"><i class="fa fa-edit"></i></button></td>
     </tr>
   </table>

   
</div>
</main>
</body>

โปรดฉันจะแก้ไขฟังก์ชัน Search () เพื่อให้สามารถรับข้อมูลจาก Array แบบไดนามิกเมื่อเปลี่ยนค่าในอินพุตช่องค้นหาได้อย่างไร


person Anas CHERIET    schedule 20.07.2020    source แหล่งที่มา
comment
คำตอบของฉันช่วยแก้ปัญหาของคุณหรือไม่?   -  person Rob Monhemius    schedule 26.07.2020


คำตอบ (2)


ใช้ตัวแปรอื่นสำหรับค่าทั้งหมดและอีกตัวแปรหนึ่งสำหรับค่าที่แสดงต่อผู้ใช้ เมื่อคุณค้นหา คุณจะกรององค์ประกอบทั้งหมดและบันทึกลงในอาร์เรย์ที่คุณใช้เพื่อแสดงต่อผู้ใช้ สิ่งเดียวกันจะเกิดขึ้นเมื่อคุณล้างช่องค้นหา เพียงรับค่าทั้งหมดแล้วบันทึกลงในอาร์เรย์นี้

person Albjon    schedule 20.07.2020

คุณกำลังแทนที่ค่าในคุณสมบัติ _adherents ที่มีค่าทั้งหมดด้วยค่าใหม่

แต่คุณทำได้

  • ทำให้ _adherents เป็นส่วนตัว
  • สร้างคุณสมบัติอื่น current_adherents ที่แสดงถึงอาร์เรย์ของเอาต์พุตที่กรอง/เรียงลำดับของคุณ
  • ใช้ current_adherents ในเทมเพลตของคุณ

โค้ดตัวอย่าง

export class AdherentsComponent implements OnInit {
  private _adherents: adherent[];
  public current_adherents: adherent[];
  name: string;
  // removed code irrelevant to the question   
  Search() {
    this.current_adherents = this._adherents.filter(res => {
      return res.nomcomplet.toLowerCase().match(this.name.toLowerCase());
    })
  }  
}

แก้ไข: ถ้า name เป็นสตริงว่างตามคำจำกัดความ มันจะจับคู่องค์ประกอบทั้งหมด ดังนั้นคุณจึงสามารถลบตรรกะ if/else ได้เช่นกัน ;)

person Rob Monhemius    schedule 20.07.2020