Angular：“Observable”类型上不存在属性“then”[重复]答案

【问题标题】：Angular: Property 'then' does not exist on type 'Observable' [duplicate]Angular：“Observable”类型上不存在属性“then”[重复]
【发布时间】：2019-03-24 03:37:18
【问题描述】：

我在这里使用 Nativescript 来构建一个移动应用程序。这里有一个错误。在我使用 Visual Studio 2017 进行的 ASP.Net MVC 5 开发中，使用 $http.get().then() 很好，但在 Nativescript 中则不行。

请看下面的代码：

import { Component, OnInit } from "@angular/core";
import { HttpClient } from '@angular/common/http';

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html",
    styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {

    constructor(private http: HttpClient) {
    }

    ngOnInit(): void {
        this.http.get('https://somewebsite.com',
            {
                params: { 'sorter': '', 'isAscending': 'true', 'searchString': '', 'currentPage': '1', 'itemsPerPage': '300' },
                headers: {
                    "Authorization": "Basic encryptedcodehere"
                }
            }).then(function (response) {
                var theData = JSON.parse(response.data);
                if (theData.Data != null && theData.Data.length > 0) {
                    log(theData.Data);
                }
            });
    }
}

错误是：Property 'then' does not exist on type 'Observable'.?

这里发生了什么？

【问题讨论】：

标签： angular nativescript

【解决方案1】：

.then 是 Promise 的方法。但是你使用了一个返回 Observable 的 httpClient。您应该使用.subscribe 而不是.then。

  ngOnInit(): void {
    this.http.get('https://somewebsite.com',
        {
            params: { 'sorter': '', 'isAscending': 'true', 'searchString': '', 'currentPage': '1', 'itemsPerPage': '300' },
            headers: {
                "Authorization": "Basic encryptedcodehere"
            }
        }).subscribe(function (data) {
            var theData = JSON.parse(data);
            if (theData.Data != null && theData.Data.length > 0) {
                log(theData.Data);
            }
        });
  }

您可以在官方文档中阅读更多关于 httpClient 和 Observable 的信息

【讨论】：

尤金的答案是正确的。您可能可以查看文档以获取更多详细信息。

【解决方案2】：

使用subscribe 可能是要走的路。但是，如果您真的想使用 then（如果您需要链接调用，这会很方便），您可以使用 toPromise() 方法将您的 observable 转换为 Promise

this.http.get('https://somewebsite.com',
{
    //... 
}).toPromise().then(response => {
       //...
        });

【讨论】：

这种方法只有在您需要保证与某些旧代码或第 3 方代码兼容时才适用。否则建议使用 .subscribe 或 .do。
但是，如果您将使用 .do 将代码放在那里，则无论如何都应该调用 .subscribe。这就是可观察的工作方式。它只能为订阅的人返回数据。

【解决方案3】：

你也可以这样做

import { Component, OnInit } from "@angular/core";
import { HttpClient } from '@angular/common/http';

@Component({
 selector: "Home",
 moduleId: module.id,
 templateUrl: "./home.component.html",
 styleUrls: ["./home.component.css"]
})
export class HomeComponent implements OnInit {

constructor(private http: HttpClient) {
}

ngOnInit(): void {
    this.http.get('https://somewebsite.com',
        {
            params: { 'sorter': '', 'isAscending': 'true', 'searchString': '', 
 'currentPage': '1', 'itemsPerPage': '300' },
            headers: {
                "Authorization": "Basic encryptedcodehere"
            }
        }).subscribe(data => { // no need to write the function you can simply create a arrow function too 
            var theData = JSON.parse(data);
            if (theData.Data != null && theData.Data.length > 0) {
                log(theData.Data);
            }
        });
  }
}

它抛出错误，因为 then 是来自 promise 的方法

【讨论】：