Блог

У меня есть коврик-стол для моего проекта. Я пытаюсь отфильтровать значение таблицы. Для этого я беру ввод от пользователя и применяю событие keyup.enter. Но это не фильтрует какое-либо значение. Я построил это отсюда. В этом примере значения фильтруются идеально, но не в моем случае. Даже в консоли нет ошибки. Здесь я добавляю свой код:

тс:

     dataSource: any[] = [];
    
    applyFilter(filterValue: any) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
      }
 

HTML:

         <div class="example-header">
        <mat-form-field>
          <input
            matInput
            #inputBox
            (keyup)="applyFilter(inputBox.value)"
            placeholder="Search here"
          />
        </mat-form-field>
      </div>
      <mat-table #table [dataSource]="dataSource" matSort>
        <div>
          <ng-container matColumnDef="seriall no.">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >Serial</mat-header-cell
            >
            <mat-cell *matCellDef="let row; let i = index" data-label="seriall no.">
              {{ i   1 }}
            </mat-cell>
          </ng-container>
    
          <ng-container matColumnDef="name">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >Name</mat-header-cell
            >
            <mat-cell *matCellDef="let row" data-label="Name">
              <span fxFlex="50"
                >{{ row.user?.firstName }} {{ row.user?.lastName }}</span
              >
            </mat-cell>
          </ng-container>
    
          <ng-container matColumnDef="mail">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >E-Mail</mat-header-cell
            >
            <mat-cell *matCellDef="let row" data-label="E-Mail">
              <span fxFlex="50">{{ row.user?.email }}</span>
            </mat-cell>
          </ng-container>
    
          <ng-container matColumnDef="mobile">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >Mobile Number</mat-header-cell
            >
            <mat-cell *matCellDef="let row" data-label="Mobile Number">
              {{ row.user?.phone }}
            </mat-cell>
          </ng-container>
    
          <ng-container matColumnDef="date">
            <mat-header-cell *matHeaderCellDef mat-sort-header
              >Date</mat-header-cell
            >
            <mat-cell *matCellDef="let row" data-label="Date">
              <span fxFlex="50">{{ row.createAt }}</span>
            </mat-cell>
          </ng-container>
        </div>
    
        <ng-container matColumnDef="ticketDepartment">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Department</mat-header-cell
          >
          <mat-cell *matCellDef="let row" data-label="Department">
            {{ row.ticketDepartment.name }}
          </mat-cell>
        </ng-container>
    
        <ng-container matColumnDef="subject">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Subject</mat-header-cell
          >
          <mat-cell *matCellDef="let row" data-label="subject">
            {{ row.subject }}
          </mat-cell>
        </ng-container>
    
        <ng-container matColumnDef="issueDetails">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Issue Details</mat-header-cell
          >
          <mat-cell *matCellDef="let row" data-label="issueDetails">
            <span fxFlex="80">{{ row.issueDetails }}</span>
          </mat-cell>
        </ng-container>
        <ng-container *ngIf="token.isAdmin()" matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
          <mat-cell *matCellDef="let row">
            <button [matMenuTriggerFor]="menu" mat-button>
              <mat-icon>code</mat-icon>
            </button>
            <mat-menu #menu="matMenu">
              <button
                mat-raised-button
                class="Pending"
                (click)="changeStatus(row.id, TicketStatus.OnHold)"
              >
                <span class="btn-text"> On Hold </span>
              </button>
              <mat-divider></mat-divider
              ><button
                mat-raised-button
                class="Resolved"
                (click)="changeStatus(row.id, TicketStatus.Resolve)"
              >
                <span class="btn-text"> Resolve </span>
              </button>
              <mat-divider></mat-divider>
              <button
                mat-raised-button
                class="Rejected"
                (click)="changeStatus(row.id, TicketStatus.Reject)"
              >
                <span class="btn-text"> Reject </span>
              </button>
            </mat-menu>
          </mat-cell>
        </ng-container>
    
        <ng-container *ngIf="token.isOnlyCustomer()" matColumnDef="status">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Status</mat-header-cell
          >
          <mat-cell *matCellDef="let row" data-label="issueDetails">
            {{ TicketStatus[row.status] }}
          </mat-cell>
        </ng-container>
    
        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
      </mat-table>
 

Вам необходимо инициализировать источник MatTableDataSource данных следующим образом: dataSource = new MatTableDataSource(ELEMENT_DATA); если вы хотите использовать функциональность фильтра mat-table компонента, как указано в документации

Источник данных, который принимает массив данных на стороне клиента и включает встроенную поддержку фильтрации, сортировки (с использованием MatSort) и разбиения на страницы (с использованием MatPaginator).

Вы можете найти документацию MatTableDataSource здесь MatTableDataSource, а также рабочий пример