Angular 從帶有輸入字段的數組中搜索/過濾項目

Question

<div class="container">
  <table>
    <thead>
      <div class="searchfield">
        <input
          type="text"
          [(ngModel)]="firstName"
          (input)="Search()"
          placeholder="Search"
        />
      </div>
    </thead>

    <tbody>
      <tr>
        <th (click)="sortItems(entry.id)" scope="row">ID</th>
        <td (click)="sortItems(entry.firstName)" colspan="2">
          <label for="taskbar">Name</label>
        </td>
        <td (click)="sortItems(entry.secondName)" colspan="2">
          <label for="taskbar">Vorname</label>
        </td>
        <td (click)="sortItems(entry.firstMobileNumber)" colspan="2">
          <label for="mobileNumber">Mobilfunknummer 1 </label>
        </td>
        <td (click)="sortItems(entry.secondMobileNumber)" colspan="2">
          <label for="secondMobileNumber">Mobilfunknummer 2 </label>
        </td>
        <td (click)="sortItems(entry.firstEmail)" colspan="2">
          <label for="email">E-Mail 1 </label>
        </td>
        <td (click)="sortItems(entry.secondEmail)" colspan="2">
          <label for="email">E-Mail 2 </label>
        </td>
        <td (click)="sortItems(entry.roomNumber)" colspan="2">
          <label for="roomNumber">Raumnummer </label>
        </td>
        <td (click)="sortItems(entry.task)" colspan="2">
          <label for="task">Aufgabe </label>
        </td>
      </tr>

      <tr *ngFor="let entry of listOfContacts">
        <!-- Nur die Kopie wird angezeigt! -->

        <th scope="row">{{entry.id}}</th>

        <td colspan="2">{{entry.firstName}}</td>
        <td colspan="2">{{entry.secondName}}</td>
        <td colspan="2">{{entry.firstMobileNumber}}</td>
        <td colspan="2">{{entry.secondMobileNumber}}</td>
        <td colspan="2">{{entry.firstEmail}}</td>
        <td colspan="2">{{entry.secondEmail}}</td>
        <td colspan="2">{{entry.roomNumber}}</td>
        <td colspan="2">{{entry.task}}</td>
        <td>
          <button
            class="buttonDelete"
            (click)="openDialogDelete(entry.id)"
            color="warn"
          >
            Delete
          </button>
        </td>
        <td>
          <button (click)="openDialogEdit(entry.id)" class="btn btn-secondary">
            Edit
          </button>
        </td>
      </tr>
    </tbody>
  </table>
  <button class="buttonAdd" (click)="openDialogAdd()">Add</button>
</div>

export class TableListComponent implements OnInit {
  entry: ContactListEntry = {
    id: null,
    firstName: '',
    secondName: '',
    firstMobileNumber: '',
    secondMobileNumber: '',
    firstEmail: '',
    secondEmail: '',
    roomNumber: '',
    task: '',
    notes: '',
  };

  listOfContacts = [];
  firstName: string;

  constructor(private dataServiceService: DataServiceService, private dialog: MatDialog) {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  ngOnInit(): void {
    this.listOfContacts = this.dataServiceService.getContacts();
  }

  Search() {
    if (this.firstName != '') {
      this.listOfContacts = this.listOfContacts.filter((res) => {
        return res.firstName.toLocaleLowerCase().match(this.firstName.toLocaleLowerCase());
      });
    } else if (this.firstName == '') {
      this.ngOnInit();
    }
  }
}

我希望當我在搜索字段中輸入內容時，也會搜索 mobileNumber 或搜索數組對象中的其他項目，所以不僅是 firstName，還有所有其他項目。

不幸的是，目前它只適用於名字，因此不會搜索條目中的其他項目

Answer 1

在編寫變量的代碼名稱時，應定義它們的含義：如果您希望它搜索所有內容，則應將其稱為searchText ：

<input type="text" [(ngModel)]="searchText" (input)="Search()" placeholder="Search" /> 

搜索僅搜索名稱，因為您沒有將其與其他任何內容進行比較。

    Search(){
    
      if(this.searchText!== ""){
    let searchValue = this.searchText.toLocaleLowerCase();

        this.listOfContacts = this.listOfContacts.filter(contact =>{
          return contact.firstName.toLocaleLowerCase().match(searchValue ) ||
    contact.secondName.toLocaleLowerCase().match(searchValue) ||
    contact.email.toLocaleLowerCase().match(searchValue);
 // you can keep on adding object properties here   
    
        });
    
      }else {  // if(this.searchText== ""){ you don't need this if
        this.ngOnInit();
      } 
}
  

Answer 2

你可以試試這個，在這個解決方案中，我們遍歷列表的 object 中的每個項目，並查找項目的類型，如字符串或數字並代表它，如果任何條件與搜索值匹配，它將返回過濾后的數據

this.filteredItems = this.listToFilter.filter(item => {
                for (let key in item) {
                    try {
                        if (typeof item[key] == 'string') {
                            let result = ((item[key]) ? item[key].toLowerCase().indexOf(value.toLocaleLowerCase()) !== -1 : false);
                            if (result == true) return true;
                        } else if (typeof item[key] == 'number') {
                let result = ((item[key]) ? item[key] === value : false)
            }
                    } catch (e) {
                    }
                }
                return false;
            });