javascript - angular2 - 响应未在 html 中呈现

Question

我正在学习 angularjs2。在这里，我尝试调用 API 并得到响应。但是响应不会在 homepage.component.html 中呈现。我不确定我错了什么。我也想在另一个页面中使用此响应而无需再次调用 API。我不知道该怎么做。请帮忙解决这个问题。

homepage.component.ts

  import { Component, OnInit,Injectable } from '@angular/core';
  import {Http, Response} from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import {Observable} from 'rxjs/Rx';
  import { Router } from '@angular/router';
  import { CountriesService } from './countries.services';
  import { Countries } from './countries';


  @Component({
    moduleId: module.id,
    selector: 'my-homepage',
    templateUrl: 'homepage.component.html',
    styleUrls: [ 'homepage.component.css' ],
    providers: [ CountriesService ]
  })
  export class HomepageComponent implements OnInit {
    errorMessage: string;
    public edited = false;  
    Countries : Countries[];  

    constructor(private router: Router,private CountriesService: CountriesService) { }

    ngOnInit(){    

      this.CountriesService.getCountries().subscribe(
                        Countries => {Countries = Countries,console.log(Countries);},
                        error =>  this.errorMessage = <any>error);   
    }

  }

homepage.component.html

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 remove_padding images">{{Countries.msg}} Test
	<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 remove_padding" *ngFor="let Cities of Countries">
		<img class="img-responsive" src="{{Cities.img}}" alt="{{Cities.city}}">
		<div class="topleft">
			<a href="city/{{Cities.city}}/{{Cities.sno}}">{{Cities.city}}</a>
			<p class="city_para">{{Cities.country}}</p>
			<!--<p>23 food places and more!</p>-->
		</div>
	</div>
</div>

countries.services.ts

    import { Injectable  } from '@angular/core';
    import { Http, Headers,Response} from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/toPromise';
    import { Countries } from './countries';


    @Injectable()
    export class CountriesService {
        private CountryListUrl = "APIURL";
        private CityByCatUrl = "APIURL";

    constructor(private http: Http) {}

    getCountries(): Observable<any> {   
        const headers = new Headers();
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
        headers.append('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS');
        headers.append('Access-Control-Allow-Origin', '*');

        return this.http.get(this.CountryListUrl,{headers: headers})                 
                        .map(this.extractData)
                        .catch(this.handleError);                    
    }


    private extractData(res: Response) {      
        let Countries = res.json();     
        console.log(Countries);   
        return Countries || { };
    }

        private handleError(error: Response) {       
            return Observable.throw(error.json().error || "500 internal server error");
        }

    }

countries.ts

    export class Countries {
        Status: Number;
        msg: String;
        categorylist:JSON  ;
    }

Answer 1

您需要查看实际收到的内容:

{ 
  "Status":1,
  "categorylist":[ 
     {
      // whatever properties you have...
      "id":1,
      "city":"cityOne"
     }
     // more...
   ],
   "msg":"List Found!"
}

Countries 不是一个可以迭代的数组，它是一个对象，里面有一个数组，叫做 categoryList。我想这就是您想迭代的内容。

因此，当您订阅了您的对象并注意到订阅后，您需要将数据分配给您的对象 Countries:

.subscribe(data => {
   this.Countries= data;
});

如前所述，Countries 不是一个数组，而是一个对象，因此您应该将初始化从 Countries : Countries[]; 更改为 Countries:Countries = {}

您可以迭代对象内部的 categoryList:

<div *ngFor="let Cities of Countries.categorylist">
  <a>{{Cities.city}}</a>
</div>

不知道您的数组包含什么，您需要在自己的代码中相应地调整属性。

这是一个

DEMO

附言。无需在此处使用类，将 Countries 更改为 Interface 并将 categorylist: JSON 更改为...

export interface Countries {
  Status: Number;
  msg: String;
  categorylist: array[];
}