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

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

您需要查看实际接收的内容：

import React from 'react'
import { Button } from 'react-bootstrap'
import './mystylesheet.css'

export default function MyCustomButton(props) {
  return <Button bsClass="my-custom-class">My button</Button>
}

国家不是一个可以迭代的数组，它是一个对象，里面有一个数组，名为{ "Status":1, "categorylist":[ { // whatever properties you have... "id":1, "city":"cityOne" } // more... ], "msg":"List Found!" } 。我想这就是你想要迭代的东西。

因此，当您订阅了对象并注意到订阅时，您需要将数据分配给对象categoryList：

Countries

如上所述，Countries不是数组，而是对象，因此您应该将初始化从.subscribe(data => { this.Countries= data; }); 更改为Countries : Countries[];

您可以迭代对象内的Countries:Countries = {}：

categoryList

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

这是

https://forums.developer.apple.com/thread/31599

PS。无需在此处使用课程，将<div *ngFor="let Cities of Countries.categorylist"> <a>{{Cities.city}}</a> </div> 更改为界面并将Countries更改为....

categorylist: JSON

Answer 2

问题在于您的数据填充。您可以在分配回复时检查添加this.Countries。

ngOnInit(){    

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