php - Angular2 - 从 PHP/Json 循环输出结果

标签 php json angular

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

我已经设法创建了这个:

按钮上的 (click)="checkForList()"会向我的 PHP 后端发送一个 http.get-request,它会生成 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)
    );
}

而不只是控制台。记录数据。我想在 DOM 上的 *ngFor 循环中呈现数据。

类似这样的事情......是的,你明白了:)

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

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

最佳答案

首先必须在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>

关于php - Angular2 - 从 PHP/Json 循环输出结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46743729/

相关文章:

php - 通过ajax传递动态值

php - 代码点火器 : getting data between two dates in mysql using php

PHP 不能在带有 http_build_query() 的数组中使用 'not'

Angular 6 - i18n 与 ngx-translate

android - ionic4 Android 无法添加任务 ':app:processDebugGoogleServices',因为该名称的任务已存在

php - 如何使用 PhpSpreadsheet 检测单元格合并

javascript - 使用 .$each 访问 Json 中的嵌套数组

javascript - 属性名称的 JSON 语法

C# Web Api(非 MVC)字典参数

css - 如何使用:host-context selector in an ngClass condition?