angular - DataGrid 不会更新 Project Clarity 上的搜索

Question

我有一张表格，显示来自云 Firestore 的数据。我已经实现了自己的搜索以直接从 firestore 搜索，当我控制台时我能够获取数据但它没有显示在数据网格上。

我的前端

<input type="text" (keydown)="searchPhone($event)" placeholder="search phone no" class="input">
<div class="row">
    <div class="col-sm">
        <clr-datagrid [clDgRowSelection]="true">
            <clr-dg-column [clrDgField]="'first_name'">
                <ng-container *clrDgHideableColumn="{hidden: false}">
                    Name
                </ng-container>
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'phone_no'">
                <ng-container *clrDgHideableColumn="{hidden: false}">
                    Phone NO
                </ng-container>
            </clr-dg-column>

            <clr-dg-placeholder>We couldn't find any data.</clr-dg-placeholder>
            <clr-dg-row *clrDgItems="let contractor of contractors" [clrDgItem]="contractor" (click)="transactionView(contractor)">
                <clr-dg-cell>{{ contractor.first_name }} {{ contractor.last_name }}</clr-dg-cell>
                <clr-dg-cell>{{ contractor.phone_no }}</clr-dg-cell>
            </clr-dg-row>
        </clr-datagrid>
    </div>
</div>

在我的 ts 文件上如下

task: any;
contractors: any;
dataCollection: any;
data: Observable<ContractorDoc[]>;
search: any;
startAt = new Subject()
endAt = new Subject()


constructor(
    private afs: AngularFirestore,
    private router: Router) {
}

ngOnInit() {
    this.dataCollection = this.afs.collection('contractors')
    this.data = this.dataCollection.valueChanges()
    this.data.forEach(elem => {
        this.contractors = elem;
        console.log('Contractors', this.contractors);
    })
}

searchPhone($event) {
    let search = $event.target.value
    this.startAt.next(search)
    this.endAt.next(search + "\uf8ff")

    console.log(search);
    this.dataCollection = this.afs.collection('contractors').ref.where('phone_no', '==', search).onSnapshot((res) => {
        res.forEach(elem => {
            this.contractors = elem.data();
            console.log('My search event', elem.data());
        })
    })
}

我究竟做错了什么？

Answer 1

看起来您需要<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading">在数据网格中实现该功能。

来自关于服务器驱动的数据网格的文档