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

Question

我只用 Angular 9 开发了 2 个月，如果这是微不足道的，请原谅我 :)
基本上，我调用一个 API 去服务器端并返回一个对象。这是一个 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 要返回 -> checkinStartedResponse 因此，返回的是一个具有一些属性的对象，其中一个是另一个自定义对象。

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 调用得到处理。所以，它确实返回了我想要的对象，我只是无法阅读它。我的客户端类是从服务器端类创建的。同样，我在 isActionComplete 和 pageToDisplay 这两个属性中获取数据，但我无法读取此嵌套对象中的值。

抱歉，我的第一篇文章，我是新来的 :(
debugging see values

小更新：我可以在 Postman 中测试 api 并返回正确格式的预期响应。
我也可以把它吐出来JSON。

谢谢！！

Answer 1

我在这里看到了多个问题。

1. isPINValid != isPinValid。 JS 对象中的属性区分大小写。来自 API 的响应具有属性 isPinValid，但您正在尝试在响应中未定义的 isPINValid。

2. 您不必单独分配对象的每个属性。分配对象意味着属性也被分配。

试试下面的

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