angularjs-directive - typescript 错误 TS2339 : Property 'project' does not exist on type '{}'

Question

在 Angular 2 RC1 中遇到这个老问题..非常令人沮丧的事情..有谁知道我可以在这里做什么来编译这个..

导致错误的行是:

  this.project = res.project;

这是我的组件:

            import {Component} from '@angular/core';
            import {ProjectsMainApi} from "../../../services/projects-main";
            import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

            declare var jQuery: any;

            @Component({
                selector: 'projects',
                templateUrl: './app/components/Projects/details/project-single.html',
                directives: [ROUTER_DIRECTIVES]
            })

            export class ProjectDetailsComponent {
                project: Object = {};
                constructor(private _api: ProjectsMainApi, private _params: RouteParams) {
                    this._api.getSinglePortfolio(_params.get("id")).then(
                        (res) => {
                            this.project = res.project;
                        },
                        (error) => {
                            console.error(error);
                        }
                    )
                }
            }

我的服务如下:

            import {Http, Headers, Response} from "@angular/http"
            import {Injectable} from "@angular/core"
            import {IProjectsMain, ISingleProject} from "../interfaces/AvailableInterfaces"
            import 'rxjs/Rx';
            import {Observable} from 'rxjs/Observable';
            import {Observer} from 'rxjs/Observer';
            import 'rxjs/add/operator/share';
            import 'rxjs/add/operator/map';

            @Injectable()
            export class ProjectsMainApi {
                apiUrl: string = "http://www.example.org/api/projects";
                headers: Headers = new Headers;
                project$: Observable<IProjectsMain[]>;
                private _ProjectsMainObserver: Observer<IProjectsMain[]>;
                private _dataStore: {
                    project: IProjectsMain[]
                };

                constructor(private _http: Http) {
                    this.headers.append('Content-Type', 'application/x-www-form-urlencoded');
                    this.headers.append('X-Requested-With', 'XMLHttpRequest');
                    this.project$ = new Observable<IProjectsMain[]>(observer => this._ProjectsMainObserver = observer).share();
                    this._dataStore = { project: [] };
                }

                public getProjectsMain() {
                    this._http.get(this.apiUrl).map(response => response.json()).subscribe(data => {
                        this._dataStore.project = data.project;
                        this._ProjectsMainObserver.next(this._dataStore.project);
                    }, error => console.log('Could not load projects.'),
                        () => "done");
                }

                public getSinglePortfolio(id) {
                    console.log("the id is" + id);
                    return new Promise((resolve, reject) => {
                        this._http.get(this.apiUrl + "/" + id).map((res: Response) => res.json()).subscribe(
                            (res) => {
                                //console.log(res);
                                resolve(res);
                            }, (error) => {
                                reject(error);
                            }
                            );
                    })
                }
            }

该组件中调用的函数是 getSinglePortfolio(id)

和杰森

        {"project":[{"id":1,"title":"fdgdfgdfg","slug":"sdfgsdfgsdfg" },   {"id":2,"title":"fdgdfgdfg","slug":"sdfgsdfgsdfg" }]}

Answer 1

我认为这是 typescript 编译器错误。 您可以为此定义自定义接口(interface):

import {Component} from '@angular/core';
import {ProjectsMainApi} from "../../../services/projects-main";
import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

declare var jQuery: any;

interface ProjectResult {
  project: Object
}

@Component({
...

然后指定 res 参数的类型:

 this._api.getSinglePortfolio(_params.get("id")).then(
  (res: ProjectResult ) => {
     this.project = res.project;
  },
  (error) => {
     console.error(error);
  }
)

完整组件代码:

import {Component} from '@angular/core';
import {ProjectsMainApi} from "../../../services/projects-main";
import { RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';

declare var jQuery: any;

interface ProjectResult {
  project: Object
}

@Component({
    selector: 'projects',
    templateUrl: './app/components/Projects/details/project-single.html',
    directives: [ROUTER_DIRECTIVES]
})

export class ProjectDetailsComponent {
    project: Object = {};
    constructor(private _api: ProjectsMainApi, private _params: RouteParams) {
        this._api.getSinglePortfolio(_params.get("id")).then(
            (res: ProjectResult) => {
                this.project = res.project;
            },
            (error) => {
                console.error(error);
            }
        )
    }
}