1

webpack のコンパイルでエラーが発生するようです。削除するとコンパイルされます.dataが、テンプレートからの呼び出しでページが爆発します->コンポーネント(サービスを呼び出します)

私が得ているエラー

src/app/components/app-landing-page/app-landing-page.component.ts(95,41) のエラー: エラー TS2339: プロパティ 'data' がタイプ 'Response' に存在しません。

 webpack:  Failed to compile

それは私のコンポーネントが持っているときです

this.referrals = result.data;

成分：

this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
        result => {

            this.referrals = result.data;
            console.log('component',result);
        })

サービス：

getArsCodesApi(search: arsCodes) {
    return this.http.post(this.serviceUrl, JSON.stringify(search), httpOptions)
    JSON.stringify(search), options)
        .map((response: Response) => {
            return response;              
        })
  }

参考までに http は新しい httpclient です

.data なしでコンパイルしたら、ng serve --open .data を追加して 実行する必要があります。

追加しないと、呼び出しが機能せず、このエラーが発生します

タイプ 'object' の異なるサポート オブジェクト '[object Object]' が見つかりません。NgFor は、配列などの Iterable へのバインドのみをサポートします。

どうして？？？( console.log は、それがデータであることを明確に示しています: Array(16) )

データのconsole.logを表示する更新を編集

console.log データ配列のスクリーンショット

4

1 に答える 1

1

これは、Nicholas Pesa がコメントしたようなものHttpClientで、オブジェクト内の応答を解析し、それがどのような形状であるかを認識していません。したがって、ブラケット表記を使用するか、データを入力してください (推奨):

export interface MyResponse {
  data: MyType[];
}

export interface MyType {
  ID: number;
  ARSCode: string;
  // rest of properties
}

次に、タイプ の応答を受け取っていることを Angular に明示的に伝えますMyResponse。ボーナスとして、期待しているデータのタイプ、つまり の観測可能な配列を Angular に伝えることもできますMyType。

getArsCodesApi(search: arsCodes): Observable<MyType[]> {
  return this.http.post<MyResponse>(this.serviceUrl, search, httpOptions)
    .map(res => res.data)
}

次に、コンポーネントでサブスクライブするだけです。

referrals: MyType[] = [];

ngOnInit() {
  this.arsSevice.getArsCodesApi(this.model)
    .subscribe(
      result => {
        this.referrals = result;
        console.log('component',result);
    })
}

HttpClientドキュメントから型チェックの詳細を読む: https://angular.io/guide/http#typechecking-the-response

于 2017-12-10T19:06:53.667 に答える