Question

我在这里使用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'.？

这是怎么回事？

Answer 1

.then是Promise的方法。但是，您使用的是httpClient，它返回Observable。您应该使用.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

Answer 2

您也可以这样做

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);
            }
        });
  }
}

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

Answer 3

使用subscribe可能是可行的方法。但是，如果您确实要使用then（如果您需要链接调用，这会很方便），则可以使用toPromise()方法将您的可观察对象转换为Promise

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

角度：属性“ then”在“可观察”类型上不存在

3 个答案: