使用angular查询来自firestore的动态输入的实时数据
到目前为止，我已经尝试了这个，我能够获取所有数据，但我只想要与用户选择的输入相对应的数据。我是新手，有任何建议。
component.html： -
Name: <select [(ngModel)] = "selectedLevel" (change)="selected()"> <option *ngFor="let post of posts | async" [ngValue]="post">{{post.user}}
Component.ts： -
export interface Post{ user: string; callType : string; callDuration: string; callTime : string; }
@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })
export class AppComponent { constructor (private afs:AngularFirestore){ } public CallDetails: object = []; public calls =[];
postsCol: AngularFirestoreCollection posts: Observable<Post[]>
selectedLevel; ngOnInit(){
this.postsCol = this.afs.collection<Post>('acb', ref => ref.orderBy('user', 'asc'));
this.posts = this.postsCol.snapshotChanges().map(actions => {
return actions.map(a => {
const data = a.payload.doc.data() as Post;
const id = a.payload.doc.id;
return { id, ...data };
})
})
return this.posts;
}
这是我想要的输出格式
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
从你的描述来看，你希望在Angular应用中根据用户的选择来过滤并显示特定的数据。这里假设你想根据用户输入的某个字段（比如callType）来筛选数据。你可以通过添加一个输入框让用户输入他们想要筛选的条件，并在组件中处理这个输入来实现这一需求。
首先，在component.html中添加一个输入框供用户输入筛选条件：
<input type="text" [(ngModel)]="selectedLevel" placeholder="Enter call type to filter">
<div *ngFor="let post of filteredPosts | async">
Name: {{post.user}}
<!-- 其他你需要展示的属性 -->
</div>
然后，在component.ts中，基于用户输入的筛选条件来过滤数据。同时，确保你已经导入了rxjs的操作符如map和filter来处理Observable流。
import { Component, OnInit } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
export interface Post {
user: string;
callType: string;
callDuration: string;
callTime: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public CallDetails: object = [];
public calls = [];
postsCol: AngularFirestoreCollection<Post>;
posts: Observable<Post[]>;
selectedLevel: string; // 用户选择的筛选条件
constructor(private afs: AngularFirestore) {}
ngOnInit() {
this.postsCol = this.afs.collection<Post>('acb', ref => ref.orderBy('user', 'asc'));
this.posts = this.postsCol.snapshotChanges().pipe(
map(actions =>
actions.map(a => {
const data = a.payload.doc.data() as Post;
const id = a.payload.doc.id;
return { id, ...data };
})
)
);
// 使用switchMap操作符来根据用户输入动态过滤数据
this.filteredPosts = this.selectedLevel.pipe(
switchMap(level => {
if (!level.trim()) { // 如果没有输入，则返回所有数据
return this.posts;
}
// 否则，根据筛选条件过滤数据
return this.posts.pipe(map(posts => posts.filter(post => post.callType === level)));
})
);
}
}
注意：上述代码中直接使用了selectedLevel作为Observable是不准确的，因为selectedLevel实际上是一个字符串，不是Observable。正确的做法应该是监听selectedLevel的变化，当它变化时重新计算过滤后的数据。这通常需要使用到RxJS的BehaviorSubject或FormControl来管理用户输入，并且在每次输入变化时触发数据的重新加载或过滤。但为了简化问题，这里仅提供了一个基本思路，实际应用中可能需要更复杂的逻辑来处理用户输入与数据过滤的交互。
