尽管错误无法读取属性长度为null，但代码仍可正常工作

Question

这对我来说非常好。

<mat-form-field class="example-medium-width">
  <textarea matInput name="description" [(ngModel)]="description" placeholder="Description" maxlength="50"  #field_description="ngModel">
  </textarea>
  <mat-hint align="end">
     {{field_description.value.length}} / 50 Chars please.
   </mat-hint>
</mat-form-field>

但由于某种原因，浏览器并不开心！

  

错误TypeError：无法读取null的属性“length”       在Object.eval [as updateRenderer]（CreateLearningPlanComponent.html：75）

但是，当我在文本区域元素中键入字符时，我可以看到正确报告的值（文本区域中当前的字符数）！所以我看到1/50 ... 2/50。这告诉我并最终在第50个字符处停止用户输入。所以field_description.value.length似乎没问题。

但是未定义的长度！

但是为什么我认为你在console.log上遇到这个错误？

Answer 1

您应该使用安全导航操作员

<mat-hint align="end">
     {{field_description?.value?.length}} / 50 Chars please.
</mat-hint>

Answer 2

您如何定义组件类中的description字段？

如果您没有设置默认值，则在表单首次出现时未定义，因此您会看到该错误。

一旦开始输入，它就不再是未定义的，它可以按预期工作。

因此，您可以设置默认值（例如空字符串），也可以像其他人建议的那样使用安全导航操作符。