调用 json 数据时出错

Question

我正在尝试调用 (data/app.json) 文件中的数据。

下面是组件(customer.component.ts)文件

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'; 


@Component({
   selector: 'ylb-customer',
   templateUrl: './customer.component.html',
   styleUrls: ['./customer.component.css']
})
export class CustomerComponent  {

   spaceScreens: Array<any>;

   constructor(private http:Http){
         this.http.get('./data.json')
        .map(response => response.json().screenshots)
        .subscribe(res => this.spaceScreens = res);
      }


 }

我得到这个错误

error TS2339: Property 'map' does not exist on type 'Observable'.

对于错误，我也尝试了这个解决方案

 import 'rxjs/add/operator/map'

和

import 'rxjs/Rx';

在这个 post()

中被标记为正确的

仍然没有结果。

这是 (customer.component.html)文件

         <div>
          <mat-card class="example-card">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image" *ngFor="let spaceScreen of spaceScreens; let i = index">
                    <img src="{{ spaceScreen.img }}">
              </div>
              <mat-card-title><p>{{ spaceScreen.description }}</p></mat-card-title>
            </mat-card-header>
          </mat-card>
          </div>

这是 (app.json) 存在于名为 data

的内部文件夹中

     {   
       "screenshots":[ 
         {
            "img":"assets/img/json_1.jpg",
            "description":"USA"
        },

        {
            "img":"assets/img/json_2.jpg",
            "description":"UK"
        },

        {
            "img":"assets/img/json_3.jpg",
            "description":"INDIA"
        }

    ]        
  }

现在收到此错误

    ERROR TypeError: Cannot read property 'description' of undefined

Answer 1

从 RxJS 5.5 开始，您需要使用 pipeable operators 并将 map 运算符传递给 pipe函数。

从

导入 map 运算符

import { map } from 'rxjs/operators'

并使用类似

this.http.get('./data.json').pipe(
        map(response => response.json().screenshots)
    ).subscribe(res => this.spaceScreens = res);

Answer 2

属性 'map' 在 Observable 类型上不存在。该问题与您需要在所有运算符周围添加 pipe 这一事实有关。

改变这个，

this.http.get('./data.json').map(data => {})

至此

this.http.get('./data.json').pipe(map(data => {}))

和

像这样导入地图，

import { map } from 'rxjs/operators';

它将解决您的问题。

调用 json 数据时出错

Error in calling json data

angular

angular-material

angular6

angular-pipe