Angular &引用；类型'；对象'；不可分配给“类型”；使用新的HttpClient/HttpGetModule

接下来，我能够从本地json文件执行一个简单的

get

请求。我想练习从JSON占位符站点命中一个真正的端点，但是我很难弄清楚在

.subscribe（）

操作符中放什么。我制作了一个

IUser

接口来捕获有效负载的字段，但是带有

.subscribe（data=>{this.users=data}）

的行抛出错误

类型“Object”不能分配给类型“IUser[]”

。正确的处理方法是什么？看起来很基本，但我是个笨蛋

我的代码如下：

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

@Component({
  selector: 'pm-http',
  templateUrl: './http.component.html',
  styleUrls: ['./http.component.css']
})
export class HttpComponent implements OnInit {
  productUrl = 'https://jsonplaceholder.typicode.com/users';
  users: IUsers[];
  constructor(private _http: HttpClient) { }

  ngOnInit(): void {    
    this._http.get(this.productUrl).subscribe(data => {this.users = data});
  }

}

---

实际上，这里有一些选项，但是使用泛型将其强制转换为您期望的类型

   // Notice the Generic of IUsers[] casting the Type for resulting "data"
   this.http.get<IUsers[]>(this.productUrl).subscribe(data => ...

   // or in the subscribe
   .subscribe((data: IUsers[]) => ...

//注意IUsers[]的泛型，它为生成的“数据”强制转换类型
this.http.get（this.productUrl）.subscribe（数据=>。。。
//或者在订阅中
.订阅（（数据：IUsers[]）=>。。。

另外，我建议在模板中使用自动订阅/取消订阅的异步管道，特别是在不需要任何奇特的逻辑并且只映射值的情况下

users: Observable<IUsers[]>; // different type now

this.users = this.http.get<IUsers[]>(this.productUrl);

// template:
*ngFor="let user of users | async"

users:Observable；//现在类型不同了
this.users=this.http.get（this.productUrl）；
//模板：
*ngFor=“让用户对用户|异步”

我是Angular doc团队的一员，一个开放的待办事项是更改这些文档，以显示通过服务访问Http的“最佳实践”方式

以下是一个例子：

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';

import { IProduct } from './product';

@Injectable()
export class ProductService {
    private _productUrl = './api/products/products.json';

    constructor(private _http: HttpClient) { }

    getProducts(): Observable<IProduct[]> {
        return this._http.get<IProduct[]>(this._productUrl)
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

    private handleError(err: HttpErrorResponse) {
        // in a real world app, we may send the server to some remote logging infrastructure
        // instead of just logging it to the console
        let errorMessage = '';
        if (err.error instanceof Error) {
            // A client-side or network error occurred. Handle it accordingly.
            errorMessage = `An error occurred: ${err.error.message}`;
        } else {
            // The backend returned an unsuccessful response code.
            // The response body may contain clues as to what went wrong,
            errorMessage = `Server returned code: ${err.status}, error message is: ${err.message}`;
        }
        console.error(errorMessage);
        return Observable.throw(errorMessage);
    }
}

从'@angular/core'导入{Injectable}；
从“@angular/common/http”导入{HttpClient，HttpErrorResponse}；
从“rxjs/Observable”导入{Observable}；
导入“rxjs/add/observable/throw”；
导入“rxjs/add/operator/catch”；
导入'rxjs/add/operator/do'；
导入'rxjs/add/operator/map'；
从“./product”导入{IPProduct}；
@可注射（）
出口类产品服务{
private _productUrl='./api/products/products.json'；
构造函数（私有的_http:HttpClient）{}
getProducts（）：可观察{
返回此。\ http.get（此。\产品URL）
.do（data=>console.log（'All:'+JSON.stringify（data）））
.接住（这个.把手错误）；
}
私有句柄错误（错误：HttpErrorResponse）{
//在现实世界的应用程序中，我们可能会将服务器发送到某些远程日志记录基础设施
//而不仅仅是将其记录到控制台
让errorMessage=''；
if（err.error instanceof error）{
//发生客户端或网络错误。请相应地进行处理。
errorMessage=`发生错误：${err.error.message}`；
}否则{
//后端返回了一个不成功的响应代码。
//回应主体可能包含了错误的线索，
errorMessage=`服务器返回代码：${err.status}，错误消息为：${err.message}`；
}
控制台错误（错误消息）；
返回可观察的抛出（errorMessage）；
}
}

该组件将如下所示：

ngOnInit(): void {
    this._productService.getProducts()
            .subscribe(products => this.products = products,
                       error => this.errorMessage = <any>error);
}

ngOnInit（）：void{
这是._productService.getProducts（）
.subscribe（products=>this.products=products，
error=>this.errorMessage=error）；
}

由于数据没有IUsers类型，请尝试此

。订阅（（数据：IUsers）=>…

或

this.users=data as any；

谢谢@cyrix。

data as any

帮了我的忙。刚刚开始你的课程！我会将我的代码重构为服务，以遵循最佳实践！太好了！仅供参考…课程目前使用旧的Http服务。我们正在进行更新。明白了，我正在努力解决它我自己做了一个练习：PQuick问题，在http.get之后键入api url的原因是什么？我在没有的情况下尝试了它，但它仍然返回正确的数据。我也注意到了这一点。我认为这是因为我们定义的函数返回类型。如果我们也删除了它，那么数据就是可观察的（对象）。因此，似乎我们可以使用类型转换或方法返回类型。为了清晰起见，我喜欢使用这两种类型。