Question

我有一张表显示来自云端防火墙的数据。我已经实现了我自己的搜索，直接从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">函数。

来自server-driven datagrids

上的文档

DataGrid不会更新Project Clarity上的搜索

1 个答案: