http响应后的Angular 9类型转换问题

Question

我有一个组件，它在初始化时从 api 中检索学生信息。这是我的cmponent-version1上的onIniti代码

ngOnInit(): void {
    if(!this.student) {
      this.studentsService.getStudentDetail(this.id).subscribe(
        (response: Student) => {
          this.student = response;
        },
        error => console.log(error)
      )
    }
  }

这是我的student-service-version1 中的函数

getStudentDetail(id: number): Observable<Student> {
    return this.httpClient.get<Student>(`${this.studentsUrl}${id}/`, this.baseService.httpOptions);
  }

一切正常。现在，仅出于教学目的（我是 javascript/typescript 的新手），我想重构我的服务以使用单个get函数，该函数在不带参数的情况下调用时返回学生列表，而是返回学生详细信息使用特定 ID 调用时的信息。这是学生服务版本2

getStudents(id?: number): Observable<Student[]> {
    if(id)
      return this.httpClient.get<Student[]>(`${this.studentsUrl}${id}/`, this.baseService.httpOptions);
    else
      return this.httpClient.get<Student[]>(this.studentsUrl, this.baseService.httpOptions);
  }

鉴于我的函数的签名声明它返回一个可观察的学生数组，在我的组件中，我需要一种从Student[]到Student的类型转换。我是这样做的： component-version2

ngOnInit(): void {
    if(!this.student) {
      this.studentsService.getStudents(this.id).subscribe(
        (response: Student[]) => {
          this.student = response[0] as Student;
        },
        error => console.log(error)
      )
    }
  }

这不起作用，因此在 init 之后，student var 保持未定义。我不明白为什么，一切对我来说似乎都是正确的（尽管这种重构不是一个好主意。同样，我只是想了解背后的错误）我也尝试了 this.student = response.pop() as Student;相同的结果，但不起作用。

Answer 1

ngOnInit(): void {
if(!this.student) {
  this.studentsService.getStudents(this.id).subscribe(
    (response: Student[]) => {
      // Hope, this.student will have type as any, public student: any
      this.student = !this.id ? response[0] as Student : response as Student[];
    },
    error => console.log(error)
  )
}

}

始终尝试返回数组以避免冲突。在上面的代码中，三元运算符将完成您的工作。因为，如果您有一个 id，则意味着您正在询问特定的学生信息，否则您将询问所有学生记录。