从Firestore数据库中获取特定的和有限的检查数据到Angular 4自动完成输入,可以按照以下步骤进行:
import { Component } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
@Component({
selector: 'app-your-component',
templateUrl: './your-component.component.html',
styleUrls: ['./your-component.component.css']
})
export class YourComponent {
items: Observable<any[]>;
constructor(private firestore: AngularFirestore) {
this.items = this.firestore.collection('your-collection').valueChanges();
}
}
items
属性。你可以根据你的实际需求修改集合的名称。mat-autocomplete
)来展示从Firestore数据库中获取的数据。以下是一个简单的示例:<input type="text" matInput [matAutocomplete]="auto" [(ngModel)]="selectedItem">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of items | async" [value]="item.name">
{{ item.name }}
</mat-option>
</mat-autocomplete>
在上述代码中,我们使用了Angular Material的自动完成输入组件,并通过*ngFor
指令循环遍历items
数组中的数据,并将其展示为选项。当用户选择一个选项时,selectedItem
属性将被更新为所选项的值。
这样,你就可以从Firestore数据库中获取特定的和有限的检查数据,并在Angular 4自动完成输入中展示出来了。
注意:以上代码示例中使用了Angular Material和Firebase的AngularFire库,你需要确保已经正确安装和配置了这些依赖项。另外,Firestore数据库中的数据结构和字段名称应根据你的实际情况进行调整。
领取专属 10元无门槛券
手把手带您无忧上云