Question

我想从另一个JSON对象数组中检索对象数组，我在角度5中通过HTTP请求获取并希望在控制台中显示值。这样我就可以成功调用HTTP请求并能够订阅服务

通过模板中的* ngFor解析它工作正常，但是当我直接访问typescript文件时，它在控制台中显示未定义的值。

我的JSON就是这样。

{"data":[
   {
   userId: 1,
   id: 1,
   title: 'Loreum ispum',
   body: 'dummy text' 
   },
   {
   userId: 1,
   id: 1,
   title: 'Loreum ispum',
   body: 'dummy text' 
   },
   {
   userId: 1,
   id: 1,
   title: 'Loreum ispum',
   body: 'dummy text' 
   }]
}

我可以通过ngFor在html文件中访问它，它给出了值，但是当我在typescript中访问时，如console.log（this.obj [data]）;它显示未定义。

我需要创建一个新的数组，它只有角度为5的id和title字段请帮助。我的服务页面

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from'@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class ConfigService {
private URL: string = 'some URL';
constructor(private http:HttpClient) {}
getData(): Observable<any>  {
return this.http.get(this.URL+ '/getdata', {responseType: 'json'});
}
}

我的组件

import { Component, OnInit, Input } from '@angular/core';
import { ConfigService } from '../services/config.service';
import { FormControl } from '@angular/forms';
import { SelectionModel } from '@angular/cdk/collections';
import { FlatTreeControl } from '@angular/cdk/tree';
import { Observable, BehaviorSubject } from 'rxjs';
@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class childComponent implements OnInit {
allData: any = [];
  getALLData() {
    this.config.getData().subscribe(
      data => { this.allData= data['data']},
      err => console.error(err),
      () => console.log('done loading data')
    );
  }

  ngOnInit() {
    this.getALLData();
    console.log(this.allData);   //here its showing undefined in console
  }
}

请帮助解决这个问题

Answer 1

HTTP服务返回包含数据的响应对象。

const request = this.http.get('...');

// The subscribe triggers the HTTP request, and you can call 
// subscribe again on the same variable to trigger another HTTP request
request.subscribe((resp)=>{ 
    // this will show the response object.
    console.log(resp);
});

您应该调用take或first以确保HTTP请求已完成。

request.first().subscribe((resp)=>{ 
        // there are no memory leaks now
});

你应该处理错误。

request
   .first()
   .catch((err,o)=>console.error(err))
   .subscribe((resp)=>{
       // called if only successful
   });

当HTTP请求成功时，您可以将响应映射到服务器的实际数据。

request
   .first()
   .catch((err,o)=>console.error(err))
   .map((resp)=>resp.data)
   .subscribe((data)=>{
       // this will be the JSON from the server
       console.log(data);
   });

这就是我编写HTTP服务功能的方法。

 getFoods() {
     return this.http
                .get('....')
                .first()
                .catch((err,o)=>console.error('There was an error'))
                .map((resp)=>resp.data);
 }

稍后在您的组件中。只有在observable完成后才需要记录响应数据。

 this.data = null;
 console.log('data is null', this.data);
 this.server.getFoods().subscribe((data)=>{
      this.data = data;
      console.log('data is now set', this.data);
 });
 console.log('data is still null', this.data);

我认为这会回答您的问题，因为在HTTP请求完成后数据是延迟加载的。

通过http请求typescript angular 5从json对象数组中返回对象数组

1 个答案: