javascript - 将数据从服务返回到 Angular 中的组件

Question

我正忙于编写一项服务来将数据返回到我的 Angular 应用程序(ng4)中的组件。数据是从智能合约中检索的。

我似乎收到以下错误:

HomeComponent_Host.html:1 ERROR TypeError: this.smartContractService.getDrawId(...).subscribe is not a function

我的组件代码:

    this.smartContractService.getDrawId().subscribe(data => {
        console.log('Result:: ', data);
    });

以及我的服务方法:

getDrawId(): Observable<any> {
    let gameObject;
    return this.Game
        .deployed()
        .then(instance => {
            gameObject = instance;
            return gameObject.getDrawId.call();
        })
        .then(value => {
            return value; //console.log(value) returns the data.
        })
        .catch(error => {
            console.error('Error getting draw id; see log.');
            console.log(error);
        });
}

我不确定如何从服务返回数据并返回到调用组件...

Answer 1

您似乎正在尝试将 promise 和可观察结果结合起来。 Promise 和 observables 有一些相似之处，因为它们都旨在处理异步事物。但是，虽然 Promise 只处理 1 个最终值，但 Observables 处理 0、1 或多个值的流。

显然， this.Game.deployed() 返回一个 promise ，因为您正在调用 .then在它上面(这是你与 Promise 交互的方式)。然而， getDrawId 声称返回 Observable<any> ，而您正在调用.subscribe ;只存在于 observables 上的函数，而不存在于 Promise 上。

因此，前进的道路取决于您的意图。由于 this.game.deployed 返回一个 promise ，也许您想在整个过程中使用 promise ，在这种情况下您可以这样做:

getDrawId(): Promise<any> { //<--- type changed
    let gameObject;
    return this.Game
        .deployed()
        .then(instance => {
            gameObject = instance;
            return gameObject.getDrawId.call();
        })
        .then(value => {
            return value; //console.log(value) returns the data.
        })
        .catch(error => {
            console.error('Error getting draw id; see log.');
            console.log(error);
        });
}

// And use it with .then instead of .subscribe
this.smartContractService.getDrawId().then(data => {
    console.log('Result:: ', data);
});

或者，也许您希望 getDrawId 返回一个可观察量，在这种情况下，您可以进行更大的重构，使 this.Game.deployed() 使用可观察量，以便您在整个过程中都使用它们；或者你可以保持原样并围绕 promise 创建一个可观察的:

getDrawId(): Observable<any> {
    let gameObject;
    return Observable.fromPromise(this.Game
        .deployed()
        .then(instance => {
            gameObject = instance;
            return gameObject.getDrawId.call();
        })
        .then(value => {
            return value; //console.log(value) returns the data.
        })
        .catch(error => {
            console.error('Error getting draw id; see log.');
            console.log(error);
        });
    );
}

另外，当我离开<any>时来自您的代码，如果您知道的话，我建议您创建一个更具体的类型。