Question

我正在开发angular 4和PHP，Mysql。我对服务器的回复是

[{"transportation_pf":"1"},[{"destination":"Swarget"}],
{"transportation_pf":"5"},[{"destination":"Swarget"},
{"destination":"Dombivli"}]]

巴士服务和组件

import { Injectable } from '@angular/core';
import {Bus } from './bus';
import {Headers,Http } from '@angular/http';
import {Observable} from'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class BusService {
private busUrl='http://localhost/MycityDB/bus.php';
constructor(private http:Http) { }

getPlatforms(){

return this.http.get(this.busUrl).map(
(res)=>res.json()   
);

}

private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}

}

总线组件

import { Component, OnInit } from '@angular/core';
import { Bus } from './bus';
import {BusService } from './bus.service';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/map';


@Component({
selector: 'app-bus',
templateUrl: './bus.component.html',
styleUrls: ['./bus.component.css']
})
export class BusComponent implements OnInit {

busData: Bus[];
loadedCharacter: {};
private busUrl='http://localhost/MycityDB/bus.php';
constructor(private http: Http,private busservice: BusService) { }

ngOnInit() {
this.busservice.getPlatforms().subscribe(
(data)=>this.busData=data    
);

}

}

总线组件html是

<p *ngFor="let bus of busData">
Bus works ! {{bus.destination}}
</p>

总线类如下

export class Bus {
transportation_pf : string;
destination: string[];
}

Html输出只显示我不知道代码出错的地方。

# Bus works ! #
# Bus works ! #
# Bus works ! #
# Bus works ! #

有人可以帮忙吗？我很困惑。

Answer 1

尝试添加* ngIf =＆＃34; busData＆＃34;

<div *ngIf="busData">
  <p *ngFor="let bus of busData">
   Bus works ! {{bus.destination}}
  </p>
 </div>

或异步管道

<p *ngFor="let bus of busData | async">

这是Observable。

您必须添加服务

import 'rxjs/add/operator/map';

Answer 2

我可以注意到你得到的反应是数组和对象的组合。在您的模板ngfor中，只有busData包含bus对象的数组而不是数组和对象的组合时才会迭代。因此，将响应提取到busData对象的数组中。然后使用ngfor进行迭代。

Answer 3

我在总线组件文件

中进行了以下更改

generateArray(obj){
return Object.keys(obj).map((key)=>{ return obj[key]});
}

按照这个我也在HTML文件中进行更改

<div *ngFor="let mem of busData"> 
Platform Number    {{mem.transportation_source}}<br/>Destinations : 
<span *ngFor="let v of generateArray(mem.destination)">  {{v}} </span>
</div>

生成JSON响应时略有修正我用以下格式生成

[
{"transportation_source":"5","destination":["Swarget","Dombivli"]},
{"transportation_source":"5","destination":["Swarget","Dombivli"]}
]

需要帮助解析JSON响应Angular 4

3 个答案: