私はAngular2を初めて使用し、REST GETリクエストを作成しようとしていますが、次の場合にこのエラーが発生します。
error TS2339: Property 'then' does not exist on type 'Observable<Connection[]>'.
サービスを呼び出すコンポーネントは次のとおりです。
import { Component, OnInit} from '@angular/core';
import { Router } from '@angular/router';
import { Connection } from './connection';
import { ConnectionService } from './connection.service';
let $: any = require('../scripts/jquery-2.2.3.min.js');
@Component({
selector: 'connections',
styleUrls: [ 'connections.component.css' ],
templateUrl: 'connections.component.html',
providers: [ConnectionService]
})
export class ConnectionsComponent implements OnInit {
connections: Connection[];
selectedConnection: Connection;
constructor(
private connectionService: ConnectionService,
private router: Router) { }
getConnections(): void {
this.connectionService.getConnections().then(connections => {
this.connections = connections;
});
}
ngOnInit(): void {
this.getConnections();
}
onSelect(connection: Connection): void {
this.selectedConnection = connection;
}
gotoDetail(): void {
this.router.navigate(['/connectiondetail', this.selectedConnection.id]);
}
}
これがConnectionServiceです。
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Connection } from './connection';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class ConnectionService {
private connectionsUrl = 'https://localhost/api/connections'; // URL to web API
constructor (private http: Http) {}
getConnections(): Observable<Connection[]> {
return this.http.get(this.connectionsUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
}
このエラーを修正するにはどうすればよいですか？
ありがとうございました、
トム
Observableには、のようなpromiseのようなメソッドはありませんthen。サービスでは、Observableを返すhttp呼び出しを実行しており、このObservableを別のObservableにマップします。
本当にpromiseスタイルのAPIを使用する場合は、toPromise演算子を使用してObservableをpromiseに変換する必要があります。この演算子はデフォルトでは使用できないため、プロジェクトに一度インポートする必要もあります。
import 'rxjs/add/operator/toPromise';
promiseを使用することは問題ありませんが、ObservableAPIを直接使用する理由はいくつかあります。詳細については、Observablesの使用法を宣伝するこのブログ投稿を参照してください。
Observable APIを直接使用する場合は、then呼び出しを呼び出しに置き換えますsubscribe。ただし、コンポーネントが破棄された場合は、すべてのサブスクリプションもキャンセルする必要があることに注意してください。
getConnections(): void {
this.subscription = this.connectionService.getConnections()
.subscribe(connections => this.connections = connections);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
Observablesを操作するときの別のオプションは、結果のObservablesをコンポーネントのフィールドに割り当ててから、asyncパイプを使用することです。そうすることで、Angularがサブスクリプションを処理します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加