[解決済み] Angular HTTP GET with TypeScript エラー http.get(...).map is not a function in [null].
2022-03-16 17:21:56
質問
AngularのHTTPに問題があります。
私はただ
GET
a
JSON
のリストを作成し、それをビューに表示します。
サービスクラス
import {Injectable} from "angular2/core";
import {Hall} from "./hall";
import {Http} from "angular2/http";
@Injectable()
export class HallService {
public http:Http;
public static PATH:string = 'app/backend/'
constructor(http:Http) {
this.http=http;
}
getHalls() {
return this.http.get(HallService.PATH + 'hall.json').map((res:Response) => res.json());
}
}
そして、その中の
HallListComponent
を呼び出しています。
getHalls
メソッドをサービスから呼び出すことができます。
export class HallListComponent implements OnInit {
public halls:Hall[];
public _selectedId:number;
constructor(private _router:Router,
private _routeParams:RouteParams,
private _service:HallService) {
this._selectedId = +_routeParams.get('id');
}
ngOnInit() {
this._service.getHalls().subscribe((halls:Hall[])=>{
this.halls=halls;
});
}
}
しかし、例外が発生しました。
TypeError: this.http.get(...).map is not a function in [null].
ホールセンター・コンポーネント
import {Component} from "angular2/core";
import {RouterOutlet} from "angular2/router";
import {HallService} from "./hall.service";
import {RouteConfig} from "angular2/router";
import {HallListComponent} from "./hall-list.component";
import {HallDetailComponent} from "./hall-detail.component";
@Component({
template:`
<h2>my app</h2>
<router-outlet></router-outlet>
`,
directives: [RouterOutlet],
providers: [HallService]
})
@RouteConfig([
{path: '/', name: 'HallCenter', component:HallListComponent, useAsDefault:true},
{path: '/hall-list', name: 'HallList', component:HallListComponent}
])
export class HallCenterComponent{}
app.component
import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from "angular2/router";
import {RouteConfig} from "angular2/router";
import {HallCenterComponent} from "./hall/hall-center.component";
@Component({
selector: 'my-app',
template: `
<h1>Examenopdracht Factory</h1>
<a [routerLink]="['HallCenter']">Hall overview</a>
<router-outlet></router-outlet>
`,
directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
{path: '/hall-center/...', name:'HallCenter',component:HallCenterComponent,useAsDefault:true}
])
export class AppComponent { }
tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
解決方法は?
これをインポートする必要があるのでは?
import 'rxjs/add/operator/map'
あるいは、より一般的には、observableのためのより多くのメソッドを持ちたいのであれば、これです。 警告:これは50以上の演算子をすべてインポートし、アプリケーションに追加するため、バンドルサイズとロード時間に影響を与えます。
import 'rxjs/Rx';
参照 本号 をご覧ください。
関連
-
[解決済み] 最後のページに戻るには
-
[解決済み] Angular2の括弧、括弧、アスタリスクの違いは何ですか?
-
[解決済み] Angular CLI Error: serveコマンドはAngularプロジェクトで実行する必要がありますが、プロジェクト定義が見つかりませんでした。
-
[解決済み] angular2 tslintの警告を止めるためにコンポーネントのデフォルトプレフィックスを変更する方法
-
[解決済み] ナンバーパイプ - Angular 2のパラメータは?
-
[解決済み] Angular 2の無効化されたコントロールがform.valueに含まれない
-
[解決済み] angular2 で入力を無効にする方法
-
[解決済み] Angular Compiler は TypeScript >=3.4.0 と <3.5.0 を要求しているが、代わりに 3.5.3 が検出された
-
[解決済み] ページを離れる前に、未保存の変更点を警告する
-
[解決済み] Angularでオブジェクトを繰り返し処理する【重複】。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] NGIf else "の使い方を教えてください。
-
[解決済み] Angularで@Input()の値が変更されたときに検出する方法は?
-
[解決済み] オブジェクトのキーと値に*ngForでアクセスする
-
[解決済み] Angular2の括弧、括弧、アスタリスクの違いは何ですか?
-
[解決済み] The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 found insteadでエラーが発生しました。
-
[解決済み] ナンバーパイプ - Angular 2のパラメータは?
-
[解決済み] Angularチュートリアルのpipeメソッドとtapメソッドとは何ですか?
-
[解決済み] angular ngModuleのentryComponentsとは何ですか?
-
[解決済み] Angular 2のテンプレートでlet-*とは何ですか?
-
[解決済み] プロパティ 'catch' はタイプ 'Observable<any>' に存在しません。