从api获取数据后，角度4视图未更新

首先，我知道这个问题有很多反应，但我尝试了很多，但没有任何工作。从api获取数据后，角度4视图未更新

我使用服务从api端点获取数据，数据被检索，但之后没有更新视图。

任何人都可以帮助我，谢谢。

details.component.html：

<div class="col-sm-3"> 
    <div class="well padding-10"> 
     <h5 class="margin-top-0"><i class="fa fa-shopping-cart"></i> Commande n° {{order?.number}}</h5> 
     <ul class="no-padding list-unstyled"> 
     <li> 
      <i class="fa fa-building"></i> <strong>{{order?.site}}</strong> 
     </li> 
     <li> 
      <i class="fa fa-calendar"></i> DATE: {{order?.date}} 
     </li> 
     <li> 
      <i class="fa fa-pencil"></i> RESUME TRAVAUX: {{order?.label}} 
     </li> 
     <li> 
      <i class="fa fa-file-pdf-o"></i> DEVIS: {{order?.quote}} 
     </li> 
     </ul> 
    </div> 
    </div>

details.component.ts：

import { Component, OnInit, NgZone } from '@angular/core'; 
import {ActivatedRoute} from '@angular/router'; 
import {OrdersService} from "./orders.service"; 

@Component({ 
    selector: 'app-details', 
    templateUrl: './details.component.html', 
    styleUrls: ['./details.component.css'], 
    providers: [OrdersService], 
}) 

export class DetailsComponent implements OnInit { 

    order: any; 

    constructor(private _ordersService: OrdersService, 
       private _route: ActivatedRoute, 
       private _zone: NgZone) { } 

    ngOnInit() { 
    let id = +this._route.snapshot.params['id']; 
    this._ordersService.getOrderWithID(id) 
     .subscribe((data)=> { 
      this.order = data; 
      //this._zone.run(() => this.order = data); 
      console.log(this.order); 
     }); 

    } 

}

orders.service.ts：

import { Injectable } from '@angular/core'; 
import {JsonApiService} from "../core/api/json-api.service"; 
import {Observable} from "rxjs/Rx"; 

@Injectable() 
export class OrdersService { 

    url: string; 

    constructor(private jsonApiService: JsonApiService) { 
    this.url = '/orders'; 
    } 


    getOrderWithID(id: number):Observable<any> { 
    return this.jsonApiService.fetch(this.url + '/' + id + '.json'); 
    } 

    getOrders():Observable<any> { 
    return this.jsonApiService.fetch(this.url + '/test.json'); 
    } 

}

JSON样本：

{ 
    "data": [ 
    { 
     "id": 1, 
     "date": "31/10/2016", 
     "number": XXXXXXXX, 
     "site": "XXXXXXXX", 
     "label": "XXXXXXXX", 
     "amount": "XXXXXXXX", 
     "quote": "XXXXXXXX", 
     "state": "XXXXXXXX", 
     "delivered_at": "" 
    } 
    ] 
}

来源

2017-06-09 doc

你在订阅中获得有效的json吗？你可以分享'console.log'吗？ – echonax

嗨@echonax，是的我有一个有效的JSON（我编辑发布样本），我没有在控制台上的任何错误，只是转储的数据获取：0 {id：1，date：“31/10/2016“，编号：9000820453，地点：”NF006668 - RELAIS PROMENADE DES ANGLAIS“，标签：”ELAGUAGE PALMIER“，...} 原型数组 – doc

您可以试试'this.order = data [0];'？ – echonax

你希望在你的响应JSON，但你得到的Array，所以：

this.order = data[0];应该做的伎俩。

来源

2017-06-09 12:18:21 echonax

从api获取数据后，角度4视图未更新

回答

相关问题