Функция предиката фильтра ничего не возвращает и не может прочитать данные свойства - MatTableDataSource angular - PullRequest
0 голосов
/ 20 июня 2020

Приведенная ниже функция не работает в первый раз, когда мы вводим первую букву в строку поиска, и она ничего не возвращает в массиве, а позже, когда мы удаляем букву и продолжаем вводить, она работает нормально.

createFilterPredicate() {
    let myFilterPredicate = function(data:any, filter:string): boolean {
      console.log('data:', data);
      let searchString = JSON.parse(filter);
      return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&      
      data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
    }
    return myFilterPredicate;
  }

На самом деле, когда я отлаживаю, я вижу, что он входит в функцию. После этого он не входит в функцию myFilterPredicate и не выводит данные в консоли и ничего не возвращает. в чем проблема и как ее найти? ..

Полный код ниже:

ngOnInit(): void {
this.admissionNoFilter.valueChanges.subscribe((admissionno) => {
      this.filteredValues['admissionno'] = admissionno;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });
    this.studentNameFilter.valueChanges.subscribe((firstname) =>{
      this.filteredValues['firstname'] = firstname;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });
    this.dataSource.filterPredicate = this.createFilterPredicate();
 }

createFilterPredicate() {
    let myFilterPredicate = function(data:any, filter:string): boolean {
      console.log('data:', data);
      let searchString = JSON.parse(filter);
      return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&      
      data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
    }
    return myFilterPredicate;
  }

компонент. html

<table mat-table [dataSource]="dataSource" matSort>

          <ng-container matColumnDef="admissionno">
              <th mat-header-cell *matHeaderCellDef> <Strong> Admission No </Strong> 
                <div>
                  <mat-form-field>
                    <input matInput class="form-field" [formControl]="admissionNoFilter" placeholder="Filter">
                  </mat-form-field>
                </div>
              </th>
              <td mat-cell *matCellDef="let element"> {{element.admissionno}} </td>
          </ng-container>

          <ng-container matColumnDef="firstname">
              <th mat-header-cell *matHeaderCellDef > <Strong> Student Name </Strong>
              <div>
                <mat-form-field>
                  <input matInput class="form-field" [formControl]="studentNameFilter" placeholder="Name Filter">
                </mat-form-field>
              </div>
              </th>
              <td mat-cell *matCellDef="let element"> {{element.firstname + ' ' + element.lastname}} </td>
          </ng-container>

</table>

1 Ответ

0 голосов
/ 20 июня 2020

Проблема здесь в том, что ваше свойство let было уничтожено, как только ваш вызов функции вернулся.

Измените предикат create filter на: -

createFilterPredicate(data:any, filter:string) {
      console.log('data:', data);
      let searchString = JSON.parse(filter);
      return data.admissionno.toString().trim().indexOf(searchString.admissionno) !== -1 &&      
      data.firstname.toString().trim().toLowerCase().indexOf(searchString.firstname.toLowerCase()) !== -1;
  }

и назначьте его источнику данных, например: -

this.dataSource.filterPredicate = this.createFilterPredicate;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...