ค้นหาเว็บไซต์

typescript - ฉันจะตัดช่องว่างในตัวกรอง Dropdown (p-dropdown) ของ primeNg ใน angular 5 ได้อย่างไร?


ฉันได้ใช้ primeNg dropdown (p-dropdown) ในโปรเจกต์ Angular 5 ของฉัน แต่เมื่อฉันพยายามกรองข้อมูล dropdown และฉันใส่ช่องว่าง หลังจากนั้น dropdown จะแสดง ไม่พบผลลัพธ์ ดังนั้นฉันจะแก้ปัญหานี้ได้อย่างไร?

เช่น ฉันมีเมนูแบบเลื่อนลงสำหรับประเทศ และถ้าฉันค้นหาอินเดียโดยมีช่องว่างก่อนและหลังในตัวกรอง p-dropdown จะแสดงข้อความ ไม่พบผลลัพธ์

ฉันแค่ต้องการตัดเว้นวรรค() ของสตริงที่ค้นหาในตัวกรอง primeng p-dropdown

นี่คือรหัส HTML ของ p-dropdown:

<p-dropdown (onChange)="checkType(model.transectionType)" *ngIf="availableBalance != 0.00" (keydown)="onKeyUp($event)" [style]="{'width':'100%'}" [options]="transectionType" [filter] = "true"
            [resetFilterOnHide] = "true" [(ngModel)]="model.transectionType" 
            [formControl]="form.controls['transectionType']" placeholder="Select a Transaction type" 
            optionLabel="value"></p-dropdown>

คำตอบ #1

ฉันได้พบวิธีแก้ปัญหาแล้ว แต่เป็นวิธีที่ซับซ้อน สิ่งพื้นฐานที่นี่คือเมื่อเราใช้ <p-dropdown> ในแอป Angular ของเราพร้อมกับ [filter]="true" มันจะมีเมธอด keydown สำหรับการกรองที่ถูกกำหนดไว้ใน ng_modules->primeng->components->dropdown->dropdown.js ดังนั้นเพื่อการตัดค่าที่ค้นหาหรือกรองจากด้านซ้ายและขวา เราจำเป็นต้องเพิ่ม .trim() ที่ inputValue แบบนี้: this.filterValue=inputValue.trim();

Primeng ควรเพิ่มสิ่งนี้ในโค้ดหลักของ dropdown ของพวกเขาเพื่อที่เราจะได้ไม่ต้องแก้ไขเพิ่มเติมและจะไม่เจอปัญหานี้อีกต่อไป

คำตอบ #2

ใน primeng 15 และ angular 15 :

ไฟล์ HTML

<p-dropdown (onFilter)="onFilter($event)" [filterValue]="filterValue">

ไฟล์ ts

filterValue: string = '';
onFilter(event) {
    this.filterValue = '';
    this.filterValue = CommonHelper.CorrectWrongCharacters(event.filter);
  }