Arrays 将可观察对象从web服务转换为数组-角度

该项目试图从web服务（xml格式）获取数据，并将其映射到具有名称、id、描述等的项目对象。我使用了a服务来获取和映射数据

当我运行我的应用程序时，你可以看到，我可以展开项目数组，数组中充满了对象。我试图在HTML文件中显示这个数组，但由于它不是一个对象数组，因此不允许我使用它

运行时控制台中出现的错误：

ProjectViewerComponent.html:5错误：找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到阵列之类的iTerable。

在这种情况下，如何将我的可观察对象列表（？）转换为数组？我的代码如下：

编辑：现在，当我在project.viewer.component中的fetchProjects方法中更新代码（见下文）后运行它时，就会得到这个

project.model.ts：

export class Project {
    project_id: string;
    name: string;
    description: string;

    constructor(obj: any) {
        this.project_id = obj.project_id;
        this.name = obj.name;
        this.description = obj.description;
    }
}

project.service.ts：

export abstract class ProjectService {
    //methods
    abstract fetchProjects(): Observable<Project[]>;
}

project-viewer.html：

<h3>Projects </h3>

<div >
    <ul class= "grid grid-pad">
        <a *ngFor="let project of projects" class="col-1-4">
            <li class ="module project" >
                <h4 tabindex ="0">{{project.project_id}}</h4>
            </li>
        </a>
    </ul>
</div>

项目


{{project.project_id}

试着这样做：

项目服务.ts

import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ProjectService {
    baseUrl = "http://dev-teamcity:8090/guestAuth/app/rest/projects";
    constructor(private http: Http) { }

    fetchProjects(): Observable<any> {
        const options = new RequestOptions({ headers: new Headers({ 'Content-Type': 'application/json' }) });
        return this.http.get(this.baseUrl, options).map((res: Response) => {
            const jsonResponse = res.json();
            return jsonResponse;
        });
    }
}

export class ProjectViewerComponent  {

    private projects: any;
    constructor(private service: ProjectService) { }

    this.service.fetchProjects().subscribe(data => {
        this.projects = data;
    })
}

在html文件中

<div>{{projects | json}}</div>

{{projects|json}

试着这样做：

项目服务.ts

import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Rx';

@Injectable()
export class ProjectService {
    baseUrl = "http://dev-teamcity:8090/guestAuth/app/rest/projects";
    constructor(private http: Http) { }

    fetchProjects(): Observable<any> {
        const options = new RequestOptions({ headers: new Headers({ 'Content-Type': 'application/json' }) });
        return this.http.get(this.baseUrl, options).map((res: Response) => {
            const jsonResponse = res.json();
            return jsonResponse;
        });
    }
}

export class ProjectViewerComponent  {

    private projects: any;
    constructor(private service: ProjectService) { }

    this.service.fetchProjects().subscribe(data => {
        this.projects = data;
    })
}

在html文件中

<div>{{projects | json}}</div>

{{projects|json}

您的响应对象包含count、href和项目数组。您应该分配给projects项目数组：this.projects=response.project.

this.projects=response.json（）

应该解决这个问题，并在代码末尾添加

|async

*ngFor@lingthe如果我在组件类的fetchProjects方法中尝试执行this.projects=response.project，它会给出“类型为'project[]'的属性'project'不存在”您没有project_id属性：{{project.project_id}}应该是{project.id}您应该在fetchProjects函数中执行此操作-如果您想使用前9个，请使用response['project']但是，如果您想要特定的9，那么您应该首先创建一个包含这九个id的数组，然后创建一个函数，该函数将在项目中运行。project只推送具有可sutable id的对象。将每个for projects用于每个for projects，并将项目中的每个id与数组中的id进行比较。您的响应对象包含count、href和project array。您应该分配给projects项目数组：this.projects=response.project.

this.projects=response.json（）

应该解决这个问题，并在代码末尾添加

|async

*ngFor@lingthe如果我在组件类的fetchProjects方法中尝试执行this.projects=response.project，它会给出“类型为'project[]'的属性'project'不存在”您没有project_id属性：{{project.project_id}}应该是{project.id}您应该在fetchProjects函数中执行此操作-如果您想使用前9个，请使用response['project']但是，如果您想要特定的9，那么您应该首先创建一个包含这九个id的数组，然后创建一个函数，该函数将通过项目执行。项目仅推送具有可使用id的对象。将每个用于项目，并将项目中的每个id与数组中的id进行比较。它无法到达服务，因为它不在构造函数中？[ts]意外令牌。应为构造函数、方法、访问器或属性。它无法访问服务，因为它不在构造函数内？[ts]意外令牌。应为构造函数、方法、访问器或属性。