從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視圖未更新

回答

相關問題