时间戳

首页 > 解决方案 > AngularFireFunctions httpCallable 响应后不更新

angular - AngularFireFunctions httpCallable 响应后不更新

问题描述

使用来自 AngularFireFunctions' 的 Observable httpsCallable，即使在 http 请求返回后，视图也不会更新该值。

我有一个简单的组件，它使用 AngularFireFunctions 将 httpCallable 设置为一个简单的函数。我可以看到在浏览器的网络检查器中进行的调用，并且我tap(x=>console.log(x))在 observable 上有一个确实记录了从函数返回的值。但是，{personObservable | async | json} 即使在 observable 具有值之后（来自 tap 触发器的控制台日志），它也是 null。

零件：

import { AngularFireFunctions } from '@angular/fire/functions';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
 selector: 'app-simple-test',
 template: '{{personObservable | async | json}}'
})
export class SimpleTestComponent implements OnInit {

    personObservable: Observable<any> = this.fireFunctions
            .httpsCallable('getPerson')({})
                .pipe(
                    tap(person => console.log(person))
                );

    constructor(
            private fireFunctions: AngularFireFunctions) { 
    }
...

火力基地功能：

import * as functions from 'firebase-functions';

export const viewInvite = 
        functions.https.onCall((data, context) => {
    return {name: "test name"};
});

正如预期的那样，页面加载会导致对 firebase 函数的 http 请求，控制台将包含{name: "test name"}指示 http 请求有效，触发了点击，并且 observable 现在有一个值。该页面仍将呈现“null”。

我试过用httpsCallable(...)(...)简单的 替换of({name:"test"})，效果很好。

httpsCallable 返回的 Observable 是否有什么特别之处会阻止视图使用其值？

标签： angularangularfire2rxjs-observables

解决方案

我不确定是什么导致了这种奇怪的输出，但我已经为任何与之苦苦挣扎的人确定了两个（不理想的）解决方案：

1. 将 observable toPromise() 转换为 observable，如果你需要它的话

personPromise = personObservable.toPromise();
return from(personPromise);

2.通过HTTP请求调用函数。

推荐阅读