Поиск значения из таблицы в угловых

Question

В App.Component.ts у меня есть заметка объекта, подобная этой.

handler(value: any) {    
    for (let j = 0; j < value.length; j++) {
      var note = new Notes(value[j].Id,
                           value[j].Subject, 
                           value[j].NoteId, 
                           value[j].Type, 
                           value[j].Description,
                           value[j].SendToGIS,
                           value[j].AddedBy,
                           value[j].AddedOn
                          );  
        this.tripNotes.push(note);  
    };     
  }

Я хочу найти конкретное описание. Через окно поиска. Как я могу получить доступ к заметке в App.component.html.

<tr *ngFor="let note of tripNotes ;  let i = index "  
    (click)="getDetailedNotes(i);setClickedRow(i);" 
    [class.active]="i==selectedRow" >
  <td>{{note.Type}}</td>
  <td>{{note.Subject}}</td>
  <td>{{note.Description}}</td>
  <td>{{note.SendToGIS}}</td>
  <td>{{note.AddedBy}}</td>
  <td>{{note.AddedOn}}</td>
</tr>

Answer 1

Когда searchKey обновляется в поле поиска, обновлять filtetedNotes, используя функцию filter. Сначала присвойте tripNotes filtetedNotes. Используйте filter() как показано ниже:

myFunction(){
    this.filtetedNotes = this.tripNotes.filter(note=> {
        let filterText = this.searchKey.toLocaleLowerCase();

        //Full Description search (from start)
        if (note.Description.toLowerCase().startsWith(filterText)) {
            return note;
        }

        //Full Description search (anywhere in the Description)
        if (note.Description.toLowerCase().contains(filterText)) {
            return note;
        }

        //Partially Description search (from start)
        let parts = note.Description.split(' ');
        if (parts) {
            if (parts.some(x => x.toLowerCase().startsWith(filterText))) {
                return note;
            }
        }

        return null;
    });
}

<input type="text" [(ngModel)]="searchKey" (ngModelChange)="myFunction()" placeholder="Enter some text to search">
//input field in App.Component.html 

Answer 2

Вы можете использовать функцию filter для поиска в массиве.

Во-первых, вы захотите создать новую переменную для фильтруемого массива

this.filteredNotes = this.tripNotes;

Затем используйте функцию filter:

this.filtetedNotes = this.tripNotes.filter((note) => note.Description.indexOf(searchTerm) !== -1) 

А в HTML убедитесь, что вы указываете на filteredNotes

<tr *ngFor="let note of filteredNotes;  let i = index "  
    (click)="getDetailedNotes(i);setClickedRow(i);"
    [class.active]="i==selectedRow" >