如何在Angular 5中映射自定义类型的API响应
如何在Angular 5中映射自定义类型的API响应
提问于 2018-09-04 20:35:12
我有这个接口来塑造我的API响应-
interface MyTest {
property2: string
}这是我的Angular 5服务代码-
getAPI(searchKey: string) {
this.productsAPIUrl =
https://localhost:44331/api/SampleData/WeatherForecasts2";
return this.http.get<MyTest>(this.productsAPIUrl);
}我实际的API响应- https://localhost:44331/api/SampleData/WeatherForecasts2是
{"property1":"Property1","property2":"Property2","property3":"Property3"}现在我在我的组件中调用这个Angular Service，如下所示-
public incrementCounter() {
this.getAutocompleteSuggestions().subscribe((data: MyTest) => {
console.log(data);
});
}所以这里我的问题是，在调用Angular Service之后，我得到了整个响应。但是在这里我将我的API响应转换为只有property2的类型'MyTest‘，但是为什么我会得到整个响应呢？
如何在子集中转换我的API响应？如何提取API响应以及如何将其映射到我的自定义模型类型MyTest？
我只需要Property2。那么我该如何映射它呢？
回答 2
Stack Overflow用户
发布于 2018-09-04 20:40:30
因为它的TS -没有运行时类型转换这样的东西。你只需输入提示TS编译器如何威胁给定的对象。如果
this.getAutocompleteSuggestions().subscribe((data: MyTest)你的字面意思是：“接受订阅参数，并将其视为MyTest，这样你就得到了实际的对象，因为它永远不会是那种类型(纯对象)。
如果您希望该实体是精确类型，则必须自己转换它(此处使用管道映射)
Stack Overflow用户
发布于 2018-09-04 22:34:32
TypeScript将被编译成JavaScript，因此在运行时，您使用TypeScript添加的所有类型都没有意义。
您可以做的是，将您获得的对象映射到一个不同的对象中，如(stackblitz)：
import { from } from 'rxjs';
import { map } from 'rxjs/operators';
interface MyTest {
property2: string
}
class Example {
private getAutocompleteSuggestions() {
return from([{"property1":"Property1","property2":"Property2","property3":"Property3"}]);
}
public incrementCounter() {
this.getAutocompleteSuggestions().pipe(map(data => { return { property2: data.property2}})).subscribe((data: MyTest) => {
console.log(data);
});
}
}
new Example().incrementCounter();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52166498
复制相关文章
相似问题
腾讯云开发者
