Question

尽管出现错误无法读取 null 的属性长度，但代码仍然有效

2017-10-19

1191

angular angular-material2

这对我来说看起来很不错。

<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>

但出于某种原因，浏览器不高兴！

ERROR TypeError: Cannot read property 'length' of null at 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 字段？

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

只要您开始输入，它就不再是未定义的，并且它会按预期工作。

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