角度模板显示“数据是[对象对象],[对象对象],[对象对象],[对象对象]”

时间:2016-10-13 20:51:13

标签: angular

以下是我想要的示例JsonObject:

{"statusType":"OK","entity":
  {"mainprop":
   [{"fields":{
      "prop1":[value1],
      "prop2":[value2],
      "prop3":[value3]
   }}],
   [{"fields":{
      "prop1":[value1],
      "prop2":[value2],
      "prop3":[value3]
   }}],
   [{"fields":{
      "prop1":[value1],
      "prop2":[value2],
      "prop3":[value3]
   }}]
  }
}

这是我的SomeComponentInterface,用于绑定json对象:

export interface SomeComponentInterface {
 fields:{
          prop1:string[],
          prop2:string[],
          prop3:string[]
}

这是我在TS Service中的代码(用@Injectable()注释):

 getDocumentService(): Observable<SomeComponentInterface[]> {
        return this._http.get(someURL)
            .map(this.extractData)
            .catch(this.handleError);
    }
    private extractData(res: Response) {
        console.log('in extractData and response is ' + res);
        let body = res.json().entity;
        let document = JSON.parse(body).mainprop;
        console.log('data is ' + document);
        return document || { };
    }
    private handleError(error: any) {
        // In a real world app, we might use a remote logging infrastructure
        // We'd also dig deeper into the error to get a better message
        let errMsg = (error.message) ? error.message :
            error.status ? `${error.status} - ${error.statusText}` : 'Server error';
        return Observable.throw(errMsg);
    }

以下是调用上述服务的我的组件:

 document: SomeComponentInterface[];
    getDocument() {
            this._service.getDocumentService()
                .subscribe(
                document => this.document = document,
                error => this.errorMessage = <any>error);
            console.log("document is " + this.document);
        }

这是我的.html:

<div class="col-xs-12" *ngFor='let resultItem of document'>
        <!-- searchResultItem-->
        <div class="col-xs-6 searchResultItem">
          <div class="col-xs-12 docTitle">
            <p>{{resultItem.fields.prop1}}</p>
          </div>
</div>

当我运行代码时,没有错误但是resultItem显示了[object Object]的数组......我认为将结果绑定到SomeComponentInterface存在问题。我错过了什么?请帮忙。

谢谢你的时间。

0 个答案:

没有答案