angular - ngx-datatable - ตัวกรองคอลัมน์ใช้งานไม่ถูกต้องหรือไม่?

ฉันสร้างตัวกรองสำหรับคอลัมน์ชื่อเหมือนกับในเอกสาร:

https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/filter.component.ts

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

threat.component.ts

import { Component, Inject, ChangeDetectorRef, OnInit, Input, ViewChild } from '@angular/core';

import { Threat } from '../../../../models/threat.model';
import { ThreatService } from '../../../../services/threat.service';
import { DatatableComponent } from '@swimlane/ngx-datatable';

@Component({
 selector: 'app-threat',
 templateUrl: './threat.component.html',
})
export class ThreatComponent implements OnInit {
public showLoadingIcon: boolean;
private ref: ChangeDetectorRef;

threats: Threat[] = [];
temp: Threat[] = [];

@ViewChild(DatatableComponent) table: DatatableComponent;

constructor(ref: ChangeDetectorRef,
    private threatService: ThreatService
) {
    this.ref = ref;
    this.showLoadingIcon = false;

    this.temp = this.threats;
}

ngOnInit() {
    this.onGetThreats();
}

onGetThreats() {
    this.threatService.getThreats()
        .subscribe(
        response => {
            this.threats = response.items;
        });
}

filterThreatName(event: any){
    const val = event.target.value.toLowerCase();

    const temp = this.threats.filter(function (result) {
        return result.name.toLowerCase().indexOf(val) !== -1 || !val;
    });

    this.threats = temp;
    this.table.offset = 0;
 }
}

threat.component.html

<mat-card>
    <mat-card-content>
        <div class="container">
            <div [fxFlex]="calc3cols" class="col3">
            </div>
            <div>
                <div class="button-row">
                    <input 
                           style='padding:7px;margin:15px auto;width:150px;'
                           placeholder="Search name column..."
                           (keyup)='filterThreatName($event)'/>
                    <a mat-raised-button color="accent" routerLink="/threat/new">CREATE</a>
                </div>
                </div>
            </div>
    </mat-card-content>
</mat-card>
<mat-card>
    <mat-card-content>
        <div class="container">
            <div [fxFlex]="calc3cols" class="col3">
                <ngx-datatable #table
                               [columnMode]="'force'"
                               [headerHeight]="50"
                               [footerHeight]="0"
                               [rowHeight]="50"
                               [sorts]="[{prop: 'threatId', dir: 'desc'}]"
                               [rows]="threats">
                    <ngx-datatable-column name="Name">
                        <ng-template let-row="row" ngx-datatable-cell-template>
                            <a [routerLink]="['/threat/edit/', row['threatId']]">{{row['name']}}</a>
                        </ng-template>
                    </ngx-datatable-column>
                    <ngx-datatable-column name="Category" prop="category.name"></ngx-datatable-column>
                </ngx-datatable>
            </div>
        </div>
    </mat-card-content>
</mat-card>

คำตอบ #1

ฉันคิดว่าการเลื่อนขนาดไม่ทำงานเพราะการเลื่อนขนาดอยู่หลังจากที่คุณเปลี่ยนตัวกรอง มันจะพาคุณกลับไปที่หน้าหนึ่ง