代码之家 › 专栏 › 技术社区 › bellotas

按名称列出的短名单-Angular 5+Firebase

angularfire2 firebase-realtime-database firebase typescript list

bellotas · 技术社区 · 6 年前

服务

 getElements() {
    return (this.eleList= this.firebase.list("elements"));
  }

组成部分

eleList: Element[];
getBets() {
    return this.databaseService
      .getElements()
      .snapshotChanges()
      .subscribe(item => {
        this.eleList= [];
        item.forEach(element => {
          let x = element.payload.toJSON();
          x["$key"] = element.key;
          this.eleList.push(x as Element);
        });
      });
  }

有了这两种方法,我所做的就是将所有元素存储在 this.eleList

我想创建一个新方法,名为 filterByName(name) ,我将在其中更新只包含 name 例如,在对象中, this.eleList[1].name

1 回复 | 直到 6 年前

user4676340 user4676340 6 年前

Firebase充分利用了可观察和异步管道。

你应该利用这一点:

eleList$ = new Subject();

getElements() {
  this.this.firebase.list("elements")
    .pipe(take(1))
    .subscribe(list => this.eleList$.next(list));
}

getBets() {
  this.databaseService
    .getElements()
    .snapshotChanges()
    .pipe(
      map(item => items.map(element => ({
        ...element.payload.toJSON(),
        '$key': element.key
      })))
    )
    .subscribe(elements => this.eleList$.next(list));
}

现在对于排序列表:

sortedList$ = this.eleList$.pipe(
  map(elements => elements.filter(element => !!element.name))
);

推荐文章

Angulandy2 · 角度firebase参数“result”隐式具有“any”类型

6 年前

Noober · 为什么firestore不过滤并始终返回所有文档?

7 年前

Shkelqim Maxharraj · AngularFirstore未定义

7 年前

Sireini · 将静态数组搜索转化为可观察搜索

7 年前

Vladimir Humeniuk · 在Cloud Firestore中检查文档字段中的特定值

7 年前

Rigoberto Ramirez Cruz · 登录后初始化AngularFire2

7 年前

John · 如何使用angularfire2实现child\u removed事件+

7 年前

james watt · 搜索栏Ionic 3不工作

7 年前

Stan · Angular RxJS-取消订阅mergeMap?

7 年前

JoeKer · AngularFire2/firestore valueChanges()存在数据时返回null

7 年前