服务中的角度列表变为空

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() 中）正在显示数据......如果我没记错的话，服务应该是单例，并且存储要在组件之间共享的数据应该是使用它们的正确方法吗？

也许我在这里遗漏了一些明显的东西，但我不能让这个工作，有什么想法/帮助吗？

谢谢！

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)));

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