Angular 6.0.5 - 无法访问那里的属性答案

【问题标题】：Angular 6.0.5 - Cannot access property that's thereAngular 6.0.5 - 无法访问那里的属性
【发布时间】：2018-09-30 23:57:09
【问题描述】：

我一辈子都无法理解为什么我无法访问 Angular 6 类的属性。这是一些代码：

@Component({
  selector: 'admin-badge-component',
  templateUrl: './badge.component.html'
})

export class AdminBadgeComponent implements OnInit {

    // Badge Object
    public badgeObject: IVisitorBadge = null;

    // On Init
    public ngOnInit() {
      this.route.params.subscribe((params) => {

      // Get Badge Object From API    
      this.visitorService.getVisitorBadge(params['aid'],params['vid'])
        .subscribe((response: IVisitorBadge) => {

          console.log(response);
          this.badgeObject = response;
        });
      });
    }
}

console.log 按预期输出所有内容：

{
  "id":2,
  "visit_id":325,
  "visitor_id":45,
  "created_at":"2018-09-29 15:00:10",
  "updated_at":"2018-09-29 15:00:10",
  "visitor": {
    ...
    "firstname": "matthew",
    "lastname": "brown",
    ...
  }
}

但是，当我使用以下代码访问并在模板中显示访问者名字时：

<div>
  <h3>
    {{ badgeObject?.visitor?.firstname }} {{ badgeObject?.visitor?.lastname }}
  </h3>
</div>

没有任何显示。如果我尝试不使用? 符号直接访问属性，我会得到cannot access 'firstname' of undefined。即使我将模板包装在*ngIf 中并首先检查属性。我也尝试过初始化并设置一个loadingBool，在我得到 API 响应后设置为 false，并在*ngIf 中使用它仍然没有。

这是全班截图：https://imgur.com/a/eEfCSL3

【问题讨论】：

所以，如果我理解的很好，badgeObject 已定义，但 badgetObject.visitor 未定义？
@xrobert35 这是正确的。设置 this.badgeObject = response 后，我可以 console.log out this.badgeObject 并在我的问题中显示 json 结构。只有当我访问 this.badgeObject.visitor.firstname 时，它才会像 badgeObject.visitor undefined 一样。
如果你绑定了 badgeObject.id 你会看到“2”？
有趣，不，我也收到undefined 错误。这很奇怪，因为我正在绑定它，我什至可以在 Chrome 网络工具中看到 JSON 是有效的并且符合预期。上面没有显示，在代码的其他地方，我绑定了来自不同 API 调用的其他属性，它们工作得很好。
不确定这是否有帮助，这是全班的实际截图：imgur.com/a/eEfCSL3

标签： javascript angular

【解决方案1】：

  public constructor(private _change: ChangeDetectorRef) { }

  this.visitorService.getVisitorBadge(params['aid'],params['vid'])
    .subscribe((response: IVisitorBadge) => {
      this.badgeObject = response;
      this._change.markForCheck();
    });
  });

当你延迟加载数据时，你必须告诉变更检测器组件是脏的。第一次渲染模板时badgeObject 的值是null，但后来它被分配了一个值。

使用 ChangeDetectorRef：

https://angular.io/api/core/ChangeDetectorRef

【讨论】：

谢谢你，我确实找到了答案 - 这是不相关的，但这是有用的信息！

【解决方案2】：

发现问题。上面没有提到的是this.visitorService.getVisitorBadge 方法，我在HttpClient 标注中不小心将responseType 设置为text。将其重置回json，现在它可以工作了。

【讨论】：