显示肥皂响应角度

Question

如何在 Angular 客户端应用程序中显示 SOAP 响应？请求通过下面的 Nodejs 服务器发送。我在控制台中收到响应。我想在前端显示响应。如何在角度前端显示某些/所有字段？例如。我想显示响应中的交易编号。如何从响应中检索该值并将其显示在前端？

应用.js

app.get("/api/transunion", (req, res) => {
var base64tag = CryptoJS.enc.Base64.stringify(hashtag);
var soapRequest = `<soap:Envelope xmlns:soap="http://www.w3.org/2003/05/soap-envelope" xmlns:typ="http://autoinsight.transunion.co.za/types">
<soap:Header/>
<soap:Body>
<typ:GetConvergedDataRequest xmlns="http://autoinsight.transunion.co.za/types" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
<typ:ApiKey>96C0C1D2-1278-4C26-AC52-78B287708AC3</typ:ApiKey>
<typ:ReportCode>A4B4AC82-2F2F-4A4B-AFF4-2BE2E35238D1</typ:ReportCode>
<typ:Input i:type="HPIReportRequest">
<typ:SubscriptionUsername></typ:SubscriptionUsername>
<typ:SubscriptionPassword></typ:SubscriptionPassword>
<typ:VehicleMMCode>46620030</typ:VehicleMMCode>
<typ:VehicleManufactureYear>2014</typ:VehicleManufactureYear>
<typ:ClientReference>BryteSA</typ:ClientReference>
<typ:RequestorPerson></typ:RequestorPerson>
<typ:GuideYear>2020</typ:GuideYear>
<typ:GuideMonth>4</typ:GuideMonth>
<typ:VehicleMileage>0</typ:VehicleMileage>
</typ:Input>
</typ:GetConvergedDataRequest>
</soap:Body>
</soap:Envelope>`;
request.post({
uri: url,
form: soapRequest,
headers: {"request-hash": base64tag}
}, function(err, response, body){
console.log(body);
console.log(response.statusCode);
parseString(body, function(err, result){
if(err){
console.log("ERROR: " + err);
}
console.log(result);
res.send(result);
});
});});

客户端

组件.ts 文件

import { Component, OnInit } from '@angular/core';
import { HttpClient } from "@angular/common/http";
import * as converter from 'xml-js';
@Component({
selector: 'app-vehicle-details',
templateUrl: './vehicle-details.component.html',
styleUrls: ['./vehicle-details.component.css']
})
export class VehicleDetailsComponent implements OnInit {
data: any;
TransactionNumber: any;
EstimatedRetailPrice: any;
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get('http://localhost:3000/api/tu', {responseType: 'text' })
.subscribe((resData: any) => {
let result1 = converter.xml2json(resData.toString(), {compact: true, spaces: 4});
const JSONData = JSON.parse(result1);
this.data = JSONData;
this.TransactionNumber = JSONData.TransactionNumber;
this.EstimatedRetailPrice = JSONData.EstimatedRetailPrice;
console.log(this.TransactionNumber);
});
}
}

杰伦响应

{
"_declaration":{
"_attributes":{
"version":"1.0",
"encoding":"utf-8"
}
},
"s:Envelope":{
"_attributes":{
"xmlns:s":"http://www.w3.org/2003/05/soap-envelope"
},
"s:Body":{
"GetConvergedDataRequestResponse":{
"_attributes":{
"xmlns:i":"http://www.w3.org/2001/XMLSchema-instance",
"xmlns":"http://autoinsight.transunion.co.za/types"
},
"ConvergedData":{
"_attributes":{
"xmlns:d4p1":"http://schemas.datacontract.org/2004/07/Transunion.Auto.Convergence.B2B.BusinessModels",
"i:type":"d4p1:ConvergedResults"
},
"d4p1:AccidentHistory":{
"_attributes":{
"i:nil":"true"
}
},
"d4p1:TransactionNumber":{
"_text":"64326668"
},
"d4p1:ValidationMessages":{
"_attributes":{
"xmlns:d5p1":"http://schemas.microsoft.com/2003/10/Serialization/Arrays"
}
},
"d4p1:VehicleCodeAndDescptionInfo":{
"d4p1:VehicleCodeAndDescription":{
"d4p1:ResultCode":{
"_attributes":{
"i:nil":"true"
}
},
"d4p1:ResultCodeDescription":{
"_attributes":{
"i:nil":"true"
}
},
"d4p1:VehicleCode":{
"_text":"46620030"
},
"d4p1:VehicleTypeCode":{
"_text":"T"
},
"d4p1:VehicleTypeDescription":{
"_text":"Agricultural"
},
"d4p1:VehicleMake":{
"_text":"NEW HOLLAND"
},
"d4p1:VehicleModel":{
"_text":"TT TN"
},
"d4p1:VehicleVariant":{
"_text":"TT 55 E / T DT"
},
"d4p1:IntroductionDate":{
"_text":"2010-03-15T00:00:00"
}
},
"ReportUrl":{
"_text":"https:\\autotest.transunion.co.za/ReportApi/apireport/270c70e5-7d6d-407f-adc1-71974faec7df"
},
"ResponseStatus":{
"_attributes":{
"xmlns:d4p1":"http://schemas.servicestack.net/types",
"i:nil":"true"
}
}
}
}
}
}

Answer 1

您需要通过 Angular 绑定将响应的字段绑定到组件成员。

例如，在 Angular 组件中：

• 创建新成员 ：

订阅用户名：字符串成员

• 在您的 subscribe(( 中使用 SOAP NPM 库来解析 SOAP 响应，然后：

this.subscriptionUsername = soapData.subscriptionUsername

• 在您看来，您可以：

  已收到 {{ 订阅用户名 | 异步 }}