Question

问题

无法从Symfony访问数据到Angular2组件。

我尝试了什么

Angular2片段

dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Component({
    selector: 'app-dashboard',
    moduleId: module.id,
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
})

export class DashboardComponent implements OnInit {


    constructor(public http: Http) {}
    ngOnInit() {

    }
    public persons: any;

    data() {
        this.http.get('http://localhost/api')
            .map((res: Response) => res.json())
            .subscribe((res: any) => {
                this.persons = res;
            });
    }

}

dashboard.component.html

 <a *ngFor="let person of persons"  [routerLink]="['/detail', hero.id]"  class="col-1-4">
  <div class="module hero">
    <h4>{{person.name}}</h4>
  </div>
 </a>
</div>

json数据

{
 id: "592413bc93d2992800000029",
  name: "A Foo Bar",
 price: 19.99
},
{
 id: "5924145b93d299a812000029",
 name: "A Foo Bar",
 price: 19.99
}

我们有后端作为symfony2我们只是将json传递给组件。
当我尝试在dashboard.component.html文件中打印{{persons}}时，它不打印任何内容。
任何人都可以在从rest api渲染数据时提出遗漏的内容。
欢迎提出任何建议。

我发现问题没有在angular2组件触发data（）函数时在浏览器中触发Http请求。

Answer 1

您需要调用data方法。否则，http请求将不会触发。

constructor(public http: Http) {
   this.data();
}

Answer 2

我已经修复了问题

他们在in_memory_api中是2个问题，或者假冒bakend是主要问题

app.module.ts

imports:

 [

   InMemoryWebApiModule.forRoot(InMemoryDataService)
 ]

请尝试使用：

 imports:

 [

  InMemoryWebApiModule.forRoot(InMemoryDataService, {passThruUnknownUrl: true}), // fake in memory API simulation
 ]

如果您使用假提供商

 providers: [
 fakeBackendProvider,//comment this,if you use this xhr request would go 404
 ]

service.ts

private headers = new Headers({'Content-Type': 'application/json','Access-Control-Allow-Origin':'*'});

private heroesUrl = 'http://localhost/api';  

getApiData(): Promise<ApiDashboard[]> {
            return this.http.get(this.heroesUrl)
           .toPromise()
           .then(response => response.json() as ApiDashboard[])
           .catch(this.handleError);
             }

尝试这些步骤，确保如果http请求获得404，这将有效。

Answer 3

在HTML中，您的路由器链接似乎也是错误的。 SHouldn不是 [routerLink] =＆＃34; [＆＃39; / detail＆＃39;， person .id]＆＃34; ？

无法访问角度组件中的数据

3 个答案: