【问题标题】:Angular2 - Looping out result from PHP/JsonAngular2 - 从 PHP/Json 循环输出结果
【发布时间】:2017-10-14 10:56:42
【问题描述】:

好吧,我是 Angular n00b。我已经阅读了一些关于如何解决这个问题的指南,但我觉得我毕竟需要你的一些指导。

我已经成功创建了这个:

按钮上的 A (click)="checkForList()" 将 http.get-request 发送到我的 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 循环中呈现数据。

类似的东西......是的,你明白了:)

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

如果你能帮我把上面的东西转换成我可以在 DOM 上渲染的东西,我会很高兴 :)

【问题讨论】:

  • 先将“projectlist”声明为一个对象,然后是构造函数(私有GetProjectList:GetProjectList){} checkForList(){ this.GetProjectList.getProjects()。订阅((项目:任何[])=>这个.projectlist = projects, (error) => console.log(error) ); }

标签: php json angular


【解决方案1】:

首先必须在this 上定义projectList

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>

【讨论】:

  • 您的解决方案看起来非常简单和漂亮。不知何故,我收到错误消息“类型'ProjectList'上不存在属性'projectlist'。我猜是菜鸟错误。我在你的回答中遗漏了一些东西:)
  • 你需要在为它赋值之前声明它:) 我已经编辑了我的答案,检查一下:)
猜你喜欢
  • 1970-01-01
  • 2018-10-06
  • 2023-03-04
  • 2020-09-28
  • 2012-09-23
  • 1970-01-01
  • 1970-01-01
  • 2012-10-09
  • 2016-03-20
相关资源
最近更新 更多