无法读取未定义角度 6 *ngIf 问题的属性答案

【问题标题】：can not read property of undefined angular 6 *ngIf issue无法读取未定义角度 6 *ngIf 问题的属性
【发布时间】：2020-03-27 06:15:10
【问题描述】：

在我的 Angular 6 应用程序 .html 文件中，我的代码如下

<div *ngIf="checkForStatus()" class="row">
         .......
</div>

在 .ts 文件中，我的代码如下：

    @Input() values: OrderResponse;
    checkForStatus() {
      this.values.signers.forEach((ele)=>{
      ...................  
       return ....something.
     }
}

在这里，我从 ts 文件的 HTML 函数中获取值，但有控制台错误提示 无法读取 **undefined 的属性签名者。**

因此我将模板的逻辑更改如下：

<div *ngIf="values.signers">
<div *ngIf="checkForStatus()" class="row">
             .......
    </div>
</div>

只是用 *ngIf 将代码用 div 包装起来，这行得通吗？但这是一个合适的情况吗？我在这里错过了什么吗？可能是不好的做法？

请注意，我在 html 文件中直接使用 @Input values。

【问题讨论】：

你能安慰values看看里面有什么吗？
它正在返回 vaue，这不是问题，我的直觉是在 ts 代码完成之前模板正在渲染。
在ngOnChanges 生命周期钩子上检查@Input 值是在初始加载时分配还是需要时间？如果需要时间，请在此处添加条件并在您的 ts.xml 中创建一个变量。在您的HTML 中使用相同的

标签： angular

【解决方案1】：

似乎 values 属性未定义。在模板中，您可以通过这种方式防止该错误：

<div *ngIf="values?.signers"></div>

在组件类中：

checkForStatus() {
  if(this.values) {
    // here values property is defined
  }
}

【讨论】：

Marek，我已经做了这个技巧，正如你在我的代码中看到的那样，当我使用
它确实解决了这个错误，但如果我没有帮助正如你提到的，在 ts 文件中做同样的事情。
@user12925068，您还在方法中添加了 if 语句吗？
那么，您在代码中的哪个特定位置遇到了这个错误？
它运作良好，但在控制台中我在未定义的控制台中收到错误
“未定义控制台中的错误” - 但在哪一行？和哪个文件？ ts？ html?

【解决方案2】：

问题似乎是this.values 并非在所有情况下都设置。所以当你看你的代码时，你什么时候初始化this.values？

我会假设它当前是异步填充的（这意味着父级无法在创建时提供值）。因此，在创建组件时，第一次渲染将在this.values 被填充之前发生。然后，几毫秒后，该值被分配。
因此，第二个解决方案有效，第一个无效。在第一次它爆炸，因为在第一次渲染时，该值不可用。

您有多种方法来处理问题。您可以尝试对抗症状并检查必要的值是否可用，如果没有，则返回可接受的值

checkForStatus() {
  if(!this.values){
    return false;
  }
this.values.signers.forEach((ele)=>{
  ...................  
   return ....something.
}

或者您可以分析问题的根源并检查是否需要异步。

例如，当每个值都可用时，父组件只能将子组件添加到 DOM 中。

<childComponent [values]="this.values" *ngIf="this.values"></childComponent>

解决方案很大程度上取决于您想要实现的目标以及外观应该如何。

【讨论】：

【解决方案3】：

与 Omar Mohamed 的建议类似，但我改用了 {}。

@Input() values: OrderResponse = {};

【讨论】：

我认为这不是最好的解决方案，因为它表明 values 输入是可选的。我认为您不想实现这一目标。

【解决方案4】：

这是因为在调用ngOnInit() 之前填充了输入属性。当您使用*ngIf 访问它时，它仍然是undefined。因此，您可以在声明属性时为其赋值：

@Input() values: OrderResponse = {};

【讨论】：

你能详细说明一下吗？
当我像上面那样做时，它说 Type 'undefined[]' has no properties in common with type 'OrderResponse'
这似乎工作...我试过这样.. @Input() 值：OrderResponse = {};
当您声明“值”而不为其分配任何值时，它会自动评估为未定义。然后，当您尝试访问 *ngIf="checkForStatus()" 中的“values”变量时，它的值尚未作为输入属性分配给它。这就是为什么你得到它等于未定义。但是当你给它任何东西时，即使它是一个空对象，它也能正常工作，因为它现在有了一个值。