angular 服务中的列表变为空

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() 中）正在显示数据......如果我没有错，服务应该成为单身人士，存储组件之间共享的数据应该是使用它们的正确方式？

也许我在这里遗漏了一些明显的东西，但我不能让它工作，任何 idea/help ?

谢谢！

Answer 1

您正在丢失 getVisaDates() 中 this 关键字的上下文，因为它作为具有自己范围的回调传递。因此，当您尝试 this.visaDatesList = res.body as VisaDate[]; 时，不一定会将值分配给 class 成员变量 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 关键字的更多信息 here。

angular 服务中的列表变为空

angular list in service becomes empty

service

list

angular