angular - Project Clarity で DataGrid が検索を更新しない

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());
        })
    })
}

私は何を間違っていますか？