Angular 9：无法读取从 API 调用 [undefined] 返回的嵌套对象中的值

Question

我只用 Angular 9 开发了 2 个月，所以请原谅我，如果这是微不足道的 :)
基本上，我调用一个 API 到服务器端并且 return 是一个对象。这是一个 PUT 请求。我将数据与请求一起传递并得到一些回报。

API 从我的服务调用：

  verify(packGuid: string, userGuid: string, pinToVerify: string, device: string)
    :Observable<checkinStartedResponse> {
     
    return this.httpClient.put<checkinStartedResponse>(`package/CheckinStartedAction/${packGuid}/${userGuid}/${pinToVerify}/${device}`, null);

你看到我将预期的 Observable 强类型化为 returned -> checkinStartedResponse 因此，returned 是一个具有某些属性的对象，其中一个是另一个自定义对象。

import { PINValidation } from './PINValidation';

export interface checkinStartedResponse {
  pinValidation: PINValidation,
  isActionComplete:boolean,
  pageToDisplay: string
}

PIN 验证是：

export interface PINValidation {
  attemptsRemaining: number;
  canTryAgain: boolean;
  isPINValid: boolean;
  packageId: string;
}

这是我的组件从我的服务中调用该 verifyPIN 方法，期望得到我想要的数据。将鼠标悬停在 verifyPIN 上，我看到它想要返回 Observable。太好了。

    //try to verify PIN
   this.service.verifyPIN(this.packGuid, this.user.userGuid, this.pinToVerify, this.device)
    .subscribe( (data) => {
      console.log(data.isActionComplete);
    
      this.pinValidationResponse = data.pinValidation;
      this.pinValidationResponse.isPINValid = data.pinValidation.isPINValid;
      this.checkinResponse.pinValidation.isPINValid = data.pinValidation.isPINValid;

      this.passVerficiation = this.pinValidationResponse.isPINValid;
    
    if (this.passVerficiation) {
        console.log("ya");
        this.PINverified.emit(true);
        this.closeModal();
    }

关注
调试和使用 Console.log，我完全可以读取 isActionComplete 和 pageToDisplay 的值。 参见图片 但是如果我尝试读取组件内嵌套的 pinValidation 对象中的值，它总是未定义的。
如果我调试服务器代码，我会看到 API 调用得到处理。所以，它确实 return 我想要的对象，我就是看不懂。我的客户端 class 是在服务器端 class 的基础上创建的。同样，我在 isActionComplete 和 pageToDisplay 这两个属性中获取数据，但无法读取此嵌套对象中的值。

对不起，我的第一个post，我是新来的:(
debugging see values

小更新：我可以在 Postman 中测试 api 以及正确格式 returns.
的预期响应我也可以吐出来啦JSON.

谢谢！ <3

Answer 1

我在这里看到多个问题。

isPINValid != isPinValid。 JS 对象中的属性区分大小写。来自 API 的响应具有属性 isPinValid，但您尝试的 isPINValid 未在响应中定义。
您不必单独分配对象的每个属性。分配对象意味着也分配了属性。

尝试以下方法

this.pinValidationResponse: checkinStartedResponse;      // <-- define the type here

this.service.verifyPIN(this.packGuid, this.user.userGuid, this.pinToVerify, this.device)
  .subscribe((data: checkinStartedResponse) => {         // <-- expect the type
    console.log(data.isActionComplete);

    this.pinValidationResponse = data.pinValidation;
    this.passVerficiation = data.pinValidation.isPinValid;    // <-- access `isPinValid` not `isPINValid`

    if (this.passVerficiation) {
      console.log("ya");
      this.PINverified.emit(true);
      this.closeModal();
    }
  });

Angular 9：无法读取从 API 调用 [undefined] 返回的嵌套对象中的值

Angular 9: Cannot read values in a nested object returned from API call [undefined]

api

observable

angular

angular9