Angular2 - 循環輸出PHP/Json的結果

Okey，所以我是一個Angular n00b。我已經通過了一些關於如何解決這個問題的指南，但我覺得我需要一些指導。Angular2 - 循環輸出PHP/Json的結果

我已成功地創建這樣的：

A（點擊）= 「checkForList（）」上的按鈕發送http.get請求我的PHP-後端，其產生我已設法json_encoded數據到與Angular console.log，並工作得很好。意思是;我可以將數據接收到我的Angular應用程序中。

我的服務是這樣的：

getProjects() { 
    return this.http.get("http://localhost/php-backend.php") 
     .map(
      (response: Response) => { 
       const data = response.json(); 
       return data; 
      } 
     ) 
     .catch(
      (error: Response) => { 
       return Observable.throw("Something went wrong"); 
      } 
     ); 
}

我在我的組件

constructor(private GetProjectList: GetProjectList) {} 
    checkForList() { 
     this.GetProjectList.getProjects() 
      .subscribe(
       (projects: any[]) => console.log(projects), 
       (error) => console.log(error) 
    ); 
}

而不是僅僅console.logging數據有這樣的構造函數。我想在DOM上的* ngFor-loop中呈現數據。

事情是這樣的......是的，你得到它:)

<ul> 
    <li *ngFor="let projects for projectslist">{{ Name }}</li> 
</ul>

我會很高興，如果你能幫助我，我上面的東西轉換成的東西我可以在DOM渲染:)

來源

2017-10-14 Osgar Schölander

申報「projectlist」作爲第一個對象，然後構造函數（私人GetProjectList：GetProjectList）{} checkForList（）{ this.GetProjectList.getProjects （） .subscribe（（projects：any []）=> this.projectlist = projects，（error）=> console.log（error））; } – vikvincer

首先projectList必須在this上定義。

class myComponent { 
    public projectList; 

    constructor(private GetProjectList: GetProjectList) {} 

    checkForList() { 
     this.GetProjectList.getProjects() 
      .subscribe(
       (projects: any[]) => this.projectList = projects, 
       (error) => console.log(error) 
      ); 
    } 
}

之後，你可以使它：

<ul> 
    <li *ngFor="let project of projectList">{{ project.name }}</li> 
</ul>

來源

2017-10-14 11:42:16 kotapeter

你的解決方案看起來很簡單，很好。不知怎的，我收到錯誤消息「屬性'項目列表'不存在類型'ProjectList' Noob錯誤我猜我缺少你的答案:) –

你需要聲明它之前，你爲它分配一個值：）我編輯了我的答案，檢查它:) – kotapeter

Angular2 - 循環輸出PHP/Json的結果

回答

相關問題