ngx-datatable - 过滤列无法正常工作？

Question

我为name列创建了过滤器，如文档：

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

在输入控件中键入一些文本时，我从表中获得了这个好结果，但是当我从输入字段中删除文本或开始键入其他文本时，数据表需要刷新第一个状态或显示新值。这不起作用...只是消息“没有数据”，每次我必须刷新页面进行新的搜索..

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>

Answer 1

我认为偏移是不起作用的，因为偏移是在你更改过滤器后它带你回到第一页。