Angular 4 webApi不刷新

我正在建設我的第一個網站的角度。我試圖調用一個webAPI並在我的組件中顯示結果。這是我的服務代碼：Angular 4 webApi不刷新

getVeselVisit(): Observable<VesselVisit> 
{ 
    let result = this.http.get(this.baseUrl + '/values/GetVesselVisit/') 
     .map(res => <VesselVisit>(res.json())); 

    alert(result); 
    return result; 
}

這是我的組件：

constructor(private backEndService: BackEndService) {} 

ngOnInit(): void { 
    this.backEndService.getVeselVisit().subscribe(data => { 
     this.vesselVisit = data; 
    }); 
}

這是我的HTML視圖：

<p>Vessel VisitId: {{vesselVisit.idVisit}} |</p> 
<p>Vessel Name: {{vesselVisit.vesselName}}</p>

VesselVisit類：

export class VesselVisit { 
    constructor() { 
     this.craneList = new Array<Crane>(); 
     this.idVisit = '1'; 
     this.vesselName = ''; 
    } 

    idVisit: string; 
    vesselName: string; 
    craneList: Crane[]; 
}

這是我從服務中得到的de json：

{"VesselVisit":{"craneList":[{"unitExecutedList":[{"idUnit":"MSCK1234567"},{"idUnit":"TCKU5633679"},{"idUnit":"TCNU2968547"},{"idUnit":"MSCU2587496"}],"unitPlannedList":[{"idUnit":"KKFU9784321"},{"idUnit":"KKFU7895521"},{"idUnit":"TCLU9968570"},{"idUnit":"BOLU7889332"},{"idUnit":"LIDU2001487"}],"idCrane":"QC11"},{"unitExecutedList":[{"idUnit":"MSCK1234567"},{"idUnit":"TCKU5633679"},{"idUnit":"MSCU2587496"},{"idUnit":"MOLU9685711"}],"unitPlannedList":[{"idUnit":"KKFU9784321"}],"idCrane":"QC33"}],"idVisit":"VisTEST","vesselName":"FARGAN"}}

我正在獲取信息，但我認爲我無法將響應分配給HTML視圖，因爲我什麼都看不到。我試圖調試它，並有數據： picture

來源

2017-09-14 jre

vesselVisit包含一堆unorder對象和數組。您正在獲取數據，但數據未被格式化以顯示在html模板中。要在html模板中顯示它，您需要它作爲有序的有形數據。我也沒有在vesselVisit之後看到idVisit和vesselName。 – EyoelD

讓我添加VesselVisit類，也許它有幫助。我認爲問題在於我無法將數據對象轉換爲VesselVissti對象 – jre

Json剛添加 – jre

最後，我找到了解決方案。我在同一臺計算機上運行我的webAPI和我的角度客戶端。我不得不安裝Chrome擴展CORS，以使其工作。我認爲這是問題所在。

我試圖發佈我的webAPI上jsonplaceholder喜歡到一個存儲庫，現在，它工作正常！

來源

2017-09-18 09:48:06 jre

Angular 4 webApi不刷新

回答

相關問題