Typescript Fehler TS2339: Eigenschaft 'Projekt' existiert nicht auf Typ '{'} '

Question

Schlagen dieses alte Problem in Angular 2 RC1 .. Sehr frustrierend Zeug .. hat jemand eine Idee, was ich hier tun kann, um dies zu kompilieren. .

die Linie den Fehler thats, verursacht ist:

this.project = res.project; 

Hier meine Komponente ist:

  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); 
         } 
        ) 
       } 
      } 

und mein Service ist wie folgt:

  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); 
          } 
          ); 
        }) 
       } 
      } 

und die Funktion in dieser Komponente genannt wird, ist getSinglePortfolio (id)

und die jason

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

Answer 1

Ich denke, dass es Typoskript Compiler-Fehler ist. Sie können benutzerdefinierte Schnittstelle für das definieren:

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({ 
... 

und dann Typ für res Parameter angeben:

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

Vollkomponentencode:

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); 
      } 
     ) 
    } 
}