标签: angularfire2

如何在angular2 ng中防止DOM替换在angularfire2中的异步?

我使用angularfire2在angular2应用程序中有一个异步的消息列表.

<message *ngFor="let message of messages | async" [message]="message"></message>
Run Code Online (Sandbox Code Playgroud)

当列表更新时,ngFor中的所有元素似乎都会重新渲染.是否可以重新渲染列表中的新项目?

firebase firebase-realtime-database angularfire2 angular

7
推荐指数
1
解决办法
2249
查看次数

Firebase:firebase.Promise <any>与Rxjs Promise <any>的兼容性

我正在尝试将a firebase.Promise转换为Observable使用angular-cli生成的项目.

在这里它说,firebase.Promise可以兼容Native PromisePromise/A+实施.

但是当我尝试使用Observable.fromPromise()rxjs 的方法时出现错误.

Argument of type 'firebase.Promise<any>' is not assignable to parameter of type 'Promise<any>'.                                                               
  Types of property 'then' are incompatible.                                                                                                                  
    Type '(onResolve?: (a: any) => any, onReject?: (a: Error) => any) => Promise<any>' is not assignable to type '{ <TResult1, TResult2>(onfulfilled: (value: 
any) => TResult1 | PromiseLike<TResult1>, onrejected:...'.                                                                                                    
      Type 'firebase.Promise<any>' is not assignable to type 'Promise<any>'.
Run Code Online (Sandbox Code Playgroud)

它实际上工作,但有错误令人讨厌,任何关于如何以干净的方式避免这个错误的想法?

谢谢.

rxjs firebase typescript angularfire2 angular

7
推荐指数
1
解决办法
815
查看次数

Angular2 - 除非单击,否则不会显示更改检测

我有一个组件,您可以在其中输入一些搜索词,它将使用*ngFor循环过滤内容.问题是当我输入搜索词时,我需要点击屏幕以使更新生效.

以下是发生循环的html代码的一部分:

    <li *ngFor="let item of posts | reverse; let i = index; ">
        <div class="media" *ngIf="item.doesContainTags(searchTags)">
Run Code Online (Sandbox Code Playgroud)

在输入要搜索的标记的输入字段上执行的代码是:

 updateSearchTags() {
    event.stopPropagation();
    // sorter is what is types into the search by tag input field
    this.searchTags = this.sorter.split(',');
 }
Run Code Online (Sandbox Code Playgroud)

这是post对象的静态函数:

  doesContainTags(searchTags: string[]): boolean {

    let array = this.tags.split(',');
    if(!array || array.length === 0) {return false;}
    if(!searchTags || searchTags.length === 0) {return false;}

    for(let searchTag of searchTags){
         if(array.indexOf(searchTag) === -1) {

        } else {
        return true;
        }
    }
    return false;
 }
Run Code Online (Sandbox Code Playgroud)

这是获取循环的帖子的代码: …

angularfire2 angular

7
推荐指数
1
解决办法
4078
查看次数

Angular 2订阅组件或服务?

上下文

我有一个HospitalComponent试图显示医院列表的组件.它使用的readAll方法HospitalService(从firebase返回一个Observable):

ngOnInit() {
  this.hospitalService
    .readAll() // Make a firebase call
    .subscribe(hospitals => this.hospitals = hospitals);
}
Run Code Online (Sandbox Code Playgroud)

路由/hospital已插入此组件HospitalComponent.每次我到达时/hospital,Angular 2都会创建一个新的HospitalComponent,并且新的呼叫将被发送给hospitalService.

问题

每次到达时/hospital,医院名单都会延迟显示.

从服务构造函数本身检索医院列表是一种好习惯吗?这样,我可以从后台管理刷新列表,而不是有一些延迟.我会在组件中:

ngOnInit() {
  this.hospitals = this.hospitalService.readAll();
}
Run Code Online (Sandbox Code Playgroud)

并在服务中:

constructor(private hospitalService: HospitalService) {
  hospitalService.subscribe(hospitals => this.hospitals = hospitals);
}
Run Code Online (Sandbox Code Playgroud)

但这意味着要手动管理所有医院的变化.

observable rxjs firebase angularfire2 angular

7
推荐指数
1
解决办法
3319
查看次数

将对象数组保存到 firebase 而不获取 0,1,2...作为键

我有一个 javascript 对象数组,如下所示。

jsObjFromCsv = 
[ 
    {
        "J251525" : {
            "APPROVER" : "TOM@MAIL.COM",
            "JOB DESCRIPTION " : "CLEAN THE HOUSE",
            "JOB NUMBER" : "J251525"
        }
    }, {
        "J512912" : {
            "APPROVER" : "JAMES@MAIL.COM",
            "JOB DESCRIPTION " : "BRUSH HORSE",
            "JOB NUMBER" : "J512912"
        }
    }, {
        "J5-512" : {
            "APPROVER" : "HARRY@MAIL.COM",
            "JOB DESCRIPTION " : "WASH CAR",
            "JOB NUMBER" : "J5-512"
            }
    } 
]
Run Code Online (Sandbox Code Playgroud)

但是,当我使用以下代码保存到 firebase 时,它​​看起来像这样

firebase 截图 - 不好

saveJobToFirebase(jobs: Array<Object>) {
    const jobCodesRef = this.af.database.list('/jobCodes/' +  this.currentUser.company)
    return jobCodesRef.push(jobs);
} …
Run Code Online (Sandbox Code Playgroud)

javascript firebase firebase-realtime-database angularfire2 angular

7
推荐指数
1
解决办法
1万
查看次数

一次推送多个对象

如何使用angularfire2一次执行多个对象推送?

仅推送一个对象数组不会为每个对象设置键.

this.af.database.list( '/symbols/').push(
             {
                 typ :"symbol1", ....
             }
         );
this.af.database.list( '/symbols/').push(
             {
                 typ :"symbol2", ....
             }
         );
Run Code Online (Sandbox Code Playgroud)

javascript firebase firebase-realtime-database angularfire2 angular

7
推荐指数
1
解决办法
2336
查看次数

valueChanges() 仅返回列表更改的受影响项目

使用 angularfire2 处理 Angular5 应用程序。我有一个包含大量项目的列表。当我使用以下方法订阅它时:

this.db.list("/list").valueChanges().subscribe(data => { .. });
Run Code Online (Sandbox Code Playgroud)

我按预期在数据中获取列表的所有子项。当我现在更改 Firebase 后端中的单个项目时,回调然后再次接收所有子项的整个列表。

如何订阅仅接收数据中列表的受影响项目?

还是因为 angularfire2 在内部处理列表的状态并且只将受影响的项目从服务器传输到应用程序而无关紧要?我的目标是最小化连接流量。

提前致谢 :)

firebase firebase-realtime-database angularfire2 angular

7
推荐指数
1
解决办法
1951
查看次数

Firestore:使用“where”查询集合并仅检索文档 ID

我想查询 firestore 文档集合,并且只想使用angularfire2检索文档 ID ,以节省读取所有文档的成本。据我了解,以下代码也在检索所有文档,并导致对所有文档进行读取操作,无论我是否使用doc.data()。我对吗?

db.collection("cities").where("capital", "==", true).onSnapshot(function(querySnapshot) {
  querySnapshot.forEach(function(doc) {
    console.log(doc.id);
  }
});
Run Code Online (Sandbox Code Playgroud)

所以在文档中是这样说的:

对于文档读取以外的查询,例如对集合 ID 列表的请求,您需要为一次文档读取付费。

angularfire2 有没有办法查询集合并仅检索文档 ID?

或者除了使用 angularfire2 之外还有其他方法吗?

firebase typescript angularfire2 angular google-cloud-firestore

7
推荐指数
0
解决办法
1632
查看次数

RxJS 6 switchMap使用不推荐使用的符号

我已更新Angular 5Angular 6.现在我正在尝试更新我的代码以使其兼容RxJS 6.

.pipe(
  map(job => job[0]),
  switchMap((job) => {
    return job ? this.bookingService.findByID(job.property.id) : Observable.empty();
  }, (job: Job, bookings: Booking[]) => {
    this.mark_jobs_unavailable(job, bookings);
    return job;
  })
)
Run Code Online (Sandbox Code Playgroud)

我正在收到有关使用switchMap的警告Deprecated Symbol is used.

这些是我的进口: import {map, switchMap} from 'rxjs/operators';

在v6中有没有其他方法可以使用switchMap?此外,如果我不更改我的代码rxjs-compat应该使我现有的代码工作(我已经安装)但我得到以下错误相同的代码,但在RxJS 5样式:

.map(job => job[0])
.switchMap((job) => {
    return job ? this.bookingService.findByID(job.property.id) : Observable.empty();
}, (job: Job, bookings: Booking[]) => {
    this.mark_jobs_unavailable(job, bookings);
    return job;
})
Run Code Online (Sandbox Code Playgroud)

Error: Expected 1 argument …

rxjs angularfire2 angular angular5 angular6

7
推荐指数
2
解决办法
5008
查看次数

无法订阅CombineLatest的结果

当我更新到RxJS 6时,我的应用程序坏了。我可以正常使用它,但是这种方法让我很困惑。

以前,我们有一系列可观测的对象被flatMapped,然后像这样使用CombineLatest:

const newObservable = myArrayOfObservables
   .flatMap(observables => {
       return Observable.combineLatest(observables);
   });
Run Code Online (Sandbox Code Playgroud)

我可以订阅newObservable并从其他所有列表中获取最新输出。

现在,我正在尝试执行以下操作:

const mergedList$ = chatList$.pipe(
  mergeMap(res => {
    return combineLatest(res);
  }));
Run Code Online (Sandbox Code Playgroud)

这使我成为那些真正漫长而费解的人之一

类型'(res:Observable <{$ key:string;}> [])=> OperatorFunction <{},[{},Observable <{$ key:string; }>]>'不能分配给类型'(value:Observable <{$ key:string;}> [],index:number)=> ObservableInput <{}>'的参数。键入'OperatorFunction <{},[{},Observable <{$ key:string; }>]>'不能分配给类型'ObservableInput <{}>'。键入'OperatorFunction <{},[{},Observable <{$ key:string; }>]>”不能分配给“ Iterable <{}>”类型。类型'OperatorFunction <{},[{},Observable <{$ key:string;类型中缺少属性'[Symbol.iterator]'。}>]>'。

坦率地说,我的阅读障碍使我无法解析。

如果我只是在上面返回res,然后尝试

const mergeCombo = combineLatest(mergedList$);
Run Code Online (Sandbox Code Playgroud)

现在mergeCombo不是可观察的。相反,它是一个

OperatorFunction <{},[{},Observable <{$ key:string; }>]>

可能值得注意的是,我的原始可观察对象是由AngularFireObject.snapshotChanges()发出的

observable rxjs firebase angularfire2

7
推荐指数
1
解决办法
1556
查看次数