Question

我无法使用通过http get服务从我的JSON文件获取的数组的属性。目的是将Widget数组打印到Web

service.ts：

import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import "rxjs/Rx";
import {Interface} from './interface'

@Injectable()
export class Service {
 private url = " ";
 loadDashboard(): Observable<Interface[]>{
  return this.http.get(this.url)
  .map((response: Response) => {
    return <Interface>response.json();
  })
  .catch(this.handleError);
 }

 private handleError(error: Response){
  return Observable.throw(error.statusText);
 }
}

interface.ts：

export interface Interface {
 layout: number;
 id: number;
 column: number;
 row: number;
}

当我设置_array：Interface []时，它返回undefined，并且在函数push处出现代码获取错误：[ts]类型'Interface []'上不存在属性'layout'。当我设置_array时;代码已编译，但没有任何反应

typescript.ts：

export class Component implements OnInit { 
 _array: Interface[];
 Widget: Array<{id: number, col: number, row: number}> = [];

 constructor (private service: Service) { }

 getDashboard(){
  this.service.loadDashboard()
    .subscribe(
     loadArray => {this._array = loadArray}
     console.log(this._array); //this line return the data in the JSON file
    )
    console.log(this._array); //this line return undefined
    this.Widget.push({id: this._array.id, layout: this._array.layout, column: this._array.col, row: this._array.row})
 }

 ngOnInit(){
  getDashboard()
 }
}

JSON.json：

{
 {
  "id": 1,
  "layout": 1,
  "col": 1,
  "row": 1
 },
 {
  "id": 2,
  "layout": 1,
  "col": 1,
  "row": 2
 }
}

Answer 1

由于可观察的订阅的异步行为，这种情况正在发生。你应该在subscribe方法中做所有的操作。

而且你应该有数组来响应访问每个对象。所以，改变JSON响应。

<强> JSON.json

[
 {
  "id": 1,
  "layout": 1,
  "col": 1,
  "row": 1
 },
 {
  "id": 2,
  "layout": 1,
  "col": 1,
  "row": 2
 }
]

<强> typescript.ts：

export class Component implements OnInit { 

    _array: Interface[];
    Widget: Array<{id: number, layout:number, column: number, row: number}> = [];

    constructor (private service: Service) { }

    getDashboard(){
      this.service.loadDashboard()
        .subscribe((loadArray) => {
            this._array = loadArray
            this._array.forEach( ele => {
                this.Widget.push({
                    id: ele.id,
                    layout: ele.layout, 
                    column: ele.col, 
                    row: ele.row
                });
            })

       });

    }

   ngOnInit(){
      getDashboard()
   }
}

Answer 2

<强> service.ts

import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import "rxjs/Rx";
import {Interface} from './interface'

@Injectable()
export class Service {
 private url = " ";
 loadDashboard(): Observable<Interface[]>{
  return this.http.get(this.url)
  .map((response: Response) => {
    return <Interface[]>response.json();    // CHAGNE Type here
  })
  .catch(this.handleError);
 }

 private handleError(error: Response){
  return Observable.throw(error.statusText);
 }
}

<强> typescript.ts

export class Component implements OnInit { 
 _array: Interface[];
 Widget: Array<{id: number, col: number, row: number}> = [];

 constructor (private service: Service) { }

 getDashboard(){
  this.service.loadDashboard()
    .subscribe(loadArray => {
        this._array = loadArray;
        // Use foreach as it returns array of objects
        this._array.forEach(ele => {    
            this.Widget.push({id: ele.id, layout: ele.layout, column: ele.col, row: ele.row})
        });
     });

 }

 ngOnInit(){
  this.getDashboard()
 }
}

Answer 3

我通过将订阅移动到ngOnInit

解决了我的问题

<强> typescript.ts

getDashboard() {
 this.service.loadDashboard().map(loadArray => {this._array = loadArray})
}
ngOnInit(){
 this.getDashboard().subscribe( _ => {
  this.Widget.push({id: this._array.id, layout: this._array.layout, column: this._array.col, row: this._array.row})
 }
}

运行http get service

3 个答案: