Question

我正在尝试调用（data / app.json）文件中存在的数据。

下面是component（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);
      }


 }

我收到这个错误

错误TS2339：类型上不存在属性“地图” “可观察”。

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

 import 'rxjs/add/operator/map'

和

import 'rxjs/Rx';

此帖子中哪些标记为正确（Property 'map' does not exist on type 'Observable<Response>'）

仍然没有结果。

这是（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并将public class DetailActivity extends AppCompatActivity { TextView nameTxt,propTxt,descTxt; //Initialize webservice URL ImageView img; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_detail); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); nameTxt= (TextView) findViewById(R.id.nameTxtDetail); descTxt= (TextView) findViewById(R.id.descDetailTxt); propTxt= (TextView) findViewById(R.id.propellantTxtDetail); img= (ImageView) findViewById(R.id.spacecraftImageDetail); //RECEIVE Intent i=this.getIntent(); final String name=i.getExtras().getString("NAME_KEY"); String propellant=i.getExtras().getString("PROPELLANT_KEY"); String desc=i.getExtras().getString("DESCRIPTION_KEY"); String imageurl=i.getExtras().getString("IMAGEURL_KEY"); //BIND nameTxt.setText(name); propTxt.setText(propellant); descTxt.setText(desc); PicassoClient.downloadImage(this,imageurl,img); } }运算符传递到map函数中。

从

导入pipe运算符

map

并使用类似

import { map } from 'rxjs/operators'

Answer 2

“可观察”类型不存在“属性”地图。该问题与您需要在所有运算符周围添加 pipe 的事实有关。

更改此内容

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

对此

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

和

这样导入地图

import { map } from 'rxjs/operators';

它将解决您的问题。

Answer 3

这是我应该写的标记

Stream

调用json数据时出错

3 个答案: