Question

我正在以角度建立我的第一个网站。我正在尝试调用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

Answer 1

最后，我找到了解决方案。我在同一台计算机上运行我的webAPI和我的角度客户端。我必须安装Chrome扩展程序CORS才能使其正常运行。我认为这就是问题所在。

我试图在喜欢存储库的jsonplaceholder上发布我的webAPI，现在它正常运行！

Angular 4 webApi不刷新

1 个答案: