Javascript Http get后访问组件中的数组

我试图访问array countriesList，它是我在Angular 4组件中收到的响应。答复中包含了有关国家的详细信息，如名称、资本、人口等

如何获取component.ts中数组countriesList的长度

import { Component, OnInit } from '@angular/core';
import { Chart, Highcharts } from 'angular-highcharts';
import { CountriesserviceService } from '../countriesservice.service';

@Component({
 selector: 'app-graph1',
 templateUrl: './graph1.component.html',
 styleUrls: ['./graph1.component.css'],
 providers: [CountriesserviceService]
 })

export class Graph1Component implements OnInit {

countriesList: any[];

constructor(private countriesService: CountriesserviceService) { }

ngOnInit() {
this.countriesService.getCountries().subscribe(countriesList => 
this.countriesList = countriesList.json() );

console.log(this.countriesList);
}
}

试着这样做：

ngOnInit() {
    this.countriesService.getCountries().subscribe(
        (res) => this.onSuccess(res.json, res.headers),
        (res) => this.onError(res.json)
    );
}

private onSuccess(data, headers) {
        this.countriesList = data;
    }
private onError(error) {
    console.log(error.toString());
}

试着这样做：

ngOnInit() {
    this.countriesService.getCountries().subscribe(
        (res) => this.onSuccess(res.json, res.headers),
        (res) => this.onError(res.json)
    );
}

private onSuccess(data, headers) {
        this.countriesList = data;
    }
private onError(error) {
    console.log(error.toString());
}

---

要获取数组长度，可以使用第二种方法：

ngOnInit() {
  this.countriesService.getCountries()
      .map( res => res.json())
      .subscribe(countries => {
         this.countriesList = countries
         console.log(this.countriesList.length)
      })
}

请注意，它是异步代码，因此console.log必须位于subscribe中。如果在外部，则显示默认值（O，null，[]，未定义，…）

---后期编辑之前---

有两种方式显示getCountries的结果

第一名：

您可以直接影响组件属性的可观察getCountries：

ngOnInit() {
    this.countriesList$ = this.countriesService.getCountries().map( res => res.json())
}

ngOnInit() {
   this.countriesService.getCountries()
      .map( res => res.json())
      .subscribe(countries => this.countriesList = countries)
}

并将异步管道用于HTML angular组件：

<ul>
  <li *ngFor="let country of countriesList$ | async">{{country.name}}</li>
</ul>

<ul>
  <li *ngFor="let country of countriesList">{{country.name}}</li>
</ul>

在组件中：

<ul>
  <li *ngFor="let country of countriesList$ | async">{{country.name}}</li>
</ul>

<ul>
  <li *ngFor="let country of countriesList">{{country.name}}</li>
</ul>

{{country.name}

---

我的示例很简单，这取决于

getCountries

方法做了什么

要获得数组长度，可以使用第二种方法：

ngOnInit() {
  this.countriesService.getCountries()
      .map( res => res.json())
      .subscribe(countries => {
         this.countriesList = countries
         console.log(this.countriesList.length)
      })
}

请注意，它是异步代码，因此console.log必须位于subscribe中。如果在外部，则显示默认值（O，null，[]，未定义，…）

---后期编辑之前---

有两种方式显示getCountries的结果

第一名：

您可以直接影响组件属性的可观察getCountries：

ngOnInit() {
    this.countriesList$ = this.countriesService.getCountries().map( res => res.json())
}

ngOnInit() {
   this.countriesService.getCountries()
      .map( res => res.json())
      .subscribe(countries => this.countriesList = countries)
}

并将异步管道用于HTML angular组件：

<ul>
  <li *ngFor="let country of countriesList$ | async">{{country.name}}</li>
</ul>

<ul>
  <li *ngFor="let country of countriesList">{{country.name}}</li>
</ul>

在组件中：

<ul>
  <li *ngFor="let country of countriesList$ | async">{{country.name}}</li>
</ul>

<ul>
  <li *ngFor="let country of countriesList">{{country.name}}</li>
</ul>

{{country.name}

我的例子很简单，这取决于你的

getCountries

方法做了什么

export class Graph1Component implements OnInit {

    countriesList: Array<any> = [];

    constructor(private countriesService: CountriesserviceService) { }

    ngOnInit() {
        this.countriesService.getCountries().subscribe(countriesList => {
            this.countriesList = countriesList.json();
            console.log("countries length", this.countriesList, this.countriesList.length);
        });
    }
}

导出类Graph1组件实现OnInit{
countriesList:Array=[]；
构造函数（私有countriesService:countriesService）{}
恩戈尼尼特（）{
this.countriesService.getCountries（）.subscribe（countriesList=>{
this.countriesList=countriesList.json（）；
log（“国家长度”，this.countriesList，this.countriesList.length）；
});
}
}

试着这样做：

export class Graph1Component implements OnInit {

    countriesList: Array<any> = [];

    constructor(private countriesService: CountriesserviceService) { }

    ngOnInit() {
        this.countriesService.getCountries().subscribe(countriesList => {
            this.countriesList = countriesList.json();
            console.log("countries length", this.countriesList, this.countriesList.length);
        });
    }
}

导出类Graph1组件实现OnInit{
countriesList:Array=[]；
构造函数（私有countriesService:countriesService）{}
恩戈尼尼特（）{
this.countriesService.getCountries（）.subscribe（countriesList=>{
this.countriesList=countriesList.json（）；
log（“国家长度”，this.countriesList，this.countriesList.length）；
});
}
}

显示您的

国家服务

代码。告诉我们控制台中是否有任何错误。在这里还可以看到当您提出问题时如何创建服务代码。@Kash您能在这个问题中共享Countries服务代码吗？如果在服务中分配json（），则不需要在angular Component中的subscribe方法中分配json（），显示

countriesService

code。告诉我们控制台中是否有任何错误。在这里还可以看到当您提出问题时如何创建服务代码。@Kash您能在这个问题中共享Countries服务代码吗？如果在服务中分配json（），则不需要在angular Component中的subscribe方法中分配json（），什么是ResponseWrapper？如何声明它？对不起，我编辑了我的答案，它只是一个对应于http响应的类，但我们不需要它什么是ResponseWrapper？如何声明它？对不起，我编辑了我的答案，它只是一个对应于http响应的类，但我们不需要它