Получить свойство интерфейса после запуска http get service - PullRequest
Новая
       10

Получить свойство интерфейса после запуска http get service

0 голосов
/ 21 мая 2018

Я не могу использовать свойство массива, полученное из файла JSON через службу http get.Цель состоит в том, чтобы распечатать массив виджетов в Интернете

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 [], он возвращает неопределенное значение, и код вызывает ошибку при нажатии функции: [ts] Свойство layout не существует в типе Interface [].Когда я установил просто _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
 }
}

Ответы [ 4 ]

0 голосов
/ 24 мая 2018

Я решил свою проблему, переместив подписку на 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})
 }
}
0 голосов
/ 21 мая 2018

Это происходит из-за асинхронного поведения подписки на наблюдаемые.Вы должны сделать все операции внутри метода подписки.

А также у вас должен быть массив в ответ для доступа к каждому объекту.Итак, измените ответ 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()
   }
}
0 голосов
/ 21 мая 2018

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()
 }
}
0 голосов
/ 21 мая 2018

Попробуйте это. 

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
        this.Widget.push({id: this.array.widgets.id, layout: this.array.widgets.layout, column: this.array.widgets.col, row: this.array.widgets.row});
  });

 }

 ngOnInit(){
  getDashboard()
 }
}

Переместите this.Widget.push в метод подписки.

...