web-dev-qa-db-ja.com

「タイプ 'オブジェクト'はタイプに割り当てられません」と新しいHttpClient / HttpGetModule

Googleの公式Angular 4.3.2 doc here ）に従って、ローカルjsonファイルから簡単なgetリクエストを行うことができました。 JSONプレースホルダーサイトから実際のエンドポイントにアクセスしましたが、.subscribe()演算子に何を入れるべきかがわかりません。ペイロードのフィールドをキャプチャするためにIUserインターフェイスを作成しましたが、 .subscribe(data => {this.users = data})の行はエラーType 'Object' is not assignable to type '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});
  }

}
angularapihttp-get
14
midnightnoir

ここには実際にはいくつかのオプションがありますが、ジェネリックを使用して、期待する型にキャストします。

   // 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[]) => ...

また、特に派手なロジックを必要とせず、値をマッピングするだけの場合は、テンプレートで非同期サブスクライブを使用して、サブスクライブ/サブスクライブ解除することをお勧めします。

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

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

// template:
*ngFor="let user of users | async"
32
Mark Pieszak - Trilon.io

私はAngular docチームにいます。1つのtodo項目は、これらのドキュメントを変更して、サービスを介して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);
    }
}

コンポーネントは次のようになります。

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