[英]Typescript async and this scope
I've set up a simple service to pull data from a db, the service works fine but when I try to take the data from the service and into a component via an aysnc function, I can't seem to pass the scope of the function through using "this".我已经设置了一个简单的服务来从数据库中提取数据,该服务工作正常,但是当我尝试通过 aysnc 函数从服务中获取数据并放入组件时,我似乎无法传递范围通过使用“this”来发挥作用。
Any ideas?有任何想法吗? I must be doing something obviously wrong as I'm new to development.
因为我是开发新手,所以我一定是在做一些明显错误的事情。
Here's the service code which works fine;这是工作正常的服务代码;
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class VenueserviceService {
constructor(private http: HttpClient) { }
httpGetFeatures() {
console.log("inFeatures")
this.http.post("http://******************",
{
"command": "get_feature",
"classes":"F,G"
})
.subscribe(
(val) => {
console.log("inSubscribe")
console.log(val)
return(val)
//this.parseFeatures(val)
},
response => {
console.log("POST call in error", response);
},
() => {
});
}
parseFeatures (val: any) {
console.log("in parse Features")
console.log(val)
}
}
and here is the component TS, the problem is "this" throws an error because it's undefined as I believe the scope of this isn't being passed through.这是组件 TS,问题是“this”引发错误,因为它未定义,因为我相信 this 的范围没有被传递。 Its the final async function at the bottom.
它是底部的最终异步函数。
import { Component, OnInit } from '@angular/core';
import * as data from "./testfile.json";
import * as catdata from "../categories/cattestfile.json";
import {VenueserviceService} from "../../services/venueservice.service"
@Component({
selector: 'app-homepage',
templateUrl: './homepage.component.html',
styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
constructor(private venueService: VenueserviceService) { }
panelOpenState = false;
title = 'Cotswolds Destinations';
venues: any = (data as any).default;
categories: any = (catdata as any).default;
formatLabel(value: number) {
if (value >= 1000) {
return Math.round(value / 1000) + 'm';
}
return value;
}
value = 'Clear me!';
ngOnInit(): void {
console.log("Homepage Start");
console.log(this.categories);
console.log(this.venues);
console.log(data);
console.log(this.venues.name);
for(var i=0; i < this.venues.length; i++){
console.log(this.venues[i]);
}
console.log("Homepage End");
let categories = this.venueService.httpGetFeatures()
console.log(categories)
}
}
const getData = async () => {
const data = await this.venueService.httpGetFeatures()
console.log(data)
}
What I'd suggest is you do this我建议你这样做
Service File服务文件
httpGetFeatures() {
console.log("inFeatures")
return this.http.post("http://cotswoldsdestinations.co.uk:8443",
{
"command": "get_feature",
"classes":"F,G"
})
}
Component File组件文件
fetchedData:any;
const getData = async () => {
this.venueService.httpGetFeatures()
.subscribe( data => { this.fetchedData = data });
}
1st, you haven't returned anything in VenueserviceService.httpGetFeatures, it's return type is void.第一,你在 VenueserviceService.httpGetFeatures 中没有返回任何东西,它的返回类型是 void。
2nd, you are expecting a promise in your getData lambda function, as you are using asyc-await syntax.第二,当您使用 asyc-await 语法时,您期望 getData lambda 函数中有一个承诺。 Either do this:
要么这样做:
httpGetFeatures() {
return this.http.post("http://cotswoldsdestinations.co.uk:8443",
{
"command": "get_feature",
"classes":"F,G"
}).toPromise();
}
Or just subscribe to returned observable without awaiting:或者直接订阅返回的 observable 而无需等待:
httpGetFeatures() {
return this.http.post("http://cotswoldsdestinations.co.uk:8443",
{
"command": "get_feature",
"classes":"F,G"
});
}
const getData = () => {
this.venueService.httpGetFeatures().subscribe(data =>
console.log(data);
);
}
This is all ok if you defined getData
within some component that has venueService: VenueserviceService
passed via DI in it's constructor.如果您在具有
venueService: VenueserviceService
某个组件中定义了getData
则一切正常venueService: VenueserviceService
在其构造函数中通过DI 传递。
For it to work properly, define getData as a member of Home page component's class, eg:为了使其正常工作,将 getData 定义为主页组件类的成员,例如:
export component HomePageComponent {
constructor(private venueService: VenueserviceService) {}
getData() {
this.venueService.httpGetFeatures().subscribe(data =>
console.log(data);
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.