Angular 4中TypeError: Cannot read property 'satisfy' of undefined问题求助

嘿，这个报错我太熟了！本质问题是你的model.something在代码执行时可能还没初始化（处于undefined状态），这时候不管直接访问它的satisfy属性，还是用了不完整的安全导航，都容易踩坑。我给你几个靠谱的解决方案：

方案1：完整安全导航链+明确布尔判断 #

直接在两个<p>标签的*ngIf里把整个属性链用安全导航操作符?.包裹，并且明确判断satisfy为false（别直接用!，因为!undefined会被当成true，反而会触发第二个标签渲染，导致访问comments时再次报错）：

<p *ngIf="model?.something?.satisfy"> Yes </p>
<p *ngIf="model?.something?.satisfy === false"> {{model?.something?.comments}} </p>

方案2：用容器元素先做存在性校验 #

加一个外层容器，先确保model.something存在后，再在内部处理分支逻辑，这样内部就不用反复写安全导航了：

<div *ngIf="model?.something">
  <p *ngIf="model.something.satisfy"> Yes </p>
  <p *ngIf="!model.something.satisfy"> {{model.something.comments}} </p>
</div>

这里要注意外层的*ngIf必须用model?.something，而不是model.something——如果model本身是undefined，直接写model.something还是会触发报错。

方案3：提前初始化对象，从根源避免undefined #

在组件类里给model和something设置默认值，哪怕异步数据还没加载回来，也不会出现属性不存在的情况：

// 组件类中的代码
model = {
  something: {
    satisfy: false,
    comments: ''
  }
};

如果model是通过接口请求获取的，也可以在请求前初始化对象，或者用RxJS的defaultIfEmpty操作符给返回值设置默认结构。

为啥你之前的写法没生效？ #

你尝试的*ngIf="!model.something?.satisfy"有个隐形坑：当model.something是undefined时，model?.something?.satisfy会返回undefined，!undefined会被解析成true，这时候第二个<p>标签会试图渲染，但model.something还是undefined，访问comments自然就报错了。而你用的<div *ngIf="model.something">如果model本身是undefined，model.something也会直接报错，得改成model?.something才行。

内容的提问来源于stack exchange，提问作者Paola Reyes