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

vesselVisit包含一堆unorder对象和数组。您正在获取数据，但数据未被格式化以显示在html模板中。要在html模板中显示它，您需要它作为有序的有形数据。我也没有在vesselVisit之后看到idVisit和vesselName。 – EyoelD

让我添加VesselVisit类，也许它有帮助。我认为问题在于我无法将数据对象转换为VesselVissti对象 – jre

Json刚添加 – jre

答

最后，我找到了解决方案。我在同一台计算机上运行我的webAPI和我的角度客户端。我不得不安装Chrome扩展CORS，以使其工作。我认为这是问题所在。

我试图发布我的webAPI上jsonplaceholder喜欢到一个存储库，现在，它工作正常！

Angular 4 webApi不刷新

相关推荐