服务中的角度列表变为空

Question

我有一个Angular(v12(服务，通过httpClient请求保存API调用，我还想在其中放置一个方法来检查对象是否已经存在于后端级别(在它到达之前，当然也有安全性(。

因此，我所做的是触发http-get，然后将答案传递给一个方法来丰富它，并将结果存储在一个私有属性(visaDatesList(中，该属性应该包含我的对象列表。

当我的组件调用getAllVisaDates()方法时，这个列表正在被馈送，我可以使用console.log…来确认

下面是我的部分服务代码：

@Injectable({
providedIn: 'root'
})
export class VisasService{
private visaDatesList: VisaDate[] = [];
constructor(private httpClient: HttpClient) {}
public getAllVisaDates(): Observable<VisaDateAnswer> {
return this.httpClient
.get(`${this.baseUrl}/visa-dates`, { observe: 'response' })
.pipe(map(this.getVisaDates));
}
public checkIfVisaDoesNotAlreadyExists(visa: VisaDate): boolean {
console.log(this.visaDatesList);
let matchedYear = false;
let matchedMonth = false;
for (const entry of this.visaDatesList) {
for (const [key, value] of Object.entries(visa)) {
if (key === 'visaYear' && value === visa.visaYear) {
matchedYear = true;
}
if (key === 'visaMonth' && value === visa.visaMonth) {
matchedMonth = true;
}
if (matchedMonth && matchedYear) {
return false;
}
}
matchedYear = false;
matchedMonth = false;
}
return true;
}
private getVisaDates(res: HttpResponse<VisaDate[]>) {
const header = res.headers.get('x-visaapp-params');
const data = res.body;
this.visaDatesList = res.body as VisaDate[];
return { size: header, data, status: res.status };
}
}

正如我所说，这里的要点是，在我的getVisaDates()方法中，使用console.log，我可以看到我的列表visaDatesList被正确地馈送了

问题在于checkIfVisaDoesNotAlreadyExists()方法。由于某种原因，当另一个组件调用该服务时，即使我以前的console.log(在getVisaDates()中(显示数据，该列表也会显示为空。。。如果我没有错的话，服务应该是Singleton，存储要在组件之间共享的数据应该是正确的使用方式吗？

也许我错过了一些显而易见的东西，但我不能让它发挥作用，有什么想法/帮助吗？

谢谢！

Answer 1

getVisaDates()中this关键字的上下文丢失，因为它是作为具有自己作用域的回调传递的。因此，当您尝试this.visaDatesList = res.body as VisaDate[];时，不一定要将值分配给类成员变量visaDatesList。

你要么需要使用bind(this)

return this.httpClient
.get(`${this.baseUrl}/visa-dates`, { observe: 'response' })
.pipe(map(this.getVisaDates.bind(this)));

或者使用箭头功能

return this.httpClient
.get(`${this.baseUrl}/visa-dates`, { observe: 'response' })
.pipe(map((res: HttpResponse<VisaDate[]>) => this.getVisaDates(res)));

您可以在这里的回调中找到有关使用this关键字的更多信息。