Question

Angular - 无法读取 null 的属性‘length’”

2020-07-08

3123

javascript angular typescript angular-reactive-forms

我的 component.cs 如下：

import { Component, VERSION } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  profileForm = new FormGroup({
    message: new FormControl(''),
  });

  get message(): FormControl {
    return this.profileForm.get('message') as FormControl;
  }
}

component.html 是，

<form [formGroup]="profileForm">
  <textarea rows="5"
  cols="100"
  maxlength="500"
  formControlName="message"
  class="form-control">
</textarea>
</form>

{{message.value.length}} of 500 characters

我在页面加载时收到“core.js:4098 ERROR TypeError: 无法读取 null 的属性‘length’”，而不是在初始加载输入值期间。有人能帮忙吗？

Answer 1

这就是安全导航操作符的用途

{{message?.value?.length || 0}} 共 500 个字符

Adrian Brand

2020-07-08

Answer 2

你随时可以这样做：

<span *ngIf="message && message.value">{{message.value.length}}</span> of 500 characters

Rick

2020-07-08

Answer 3

Typescript 中任何变量或常量的 LENGTH 属性仅当数据不为 null 或 undefined 时才有效，因此在 Typescript 中，处理 length 属性时请确保将数据设置为 empty （使数据长度为零）

示例：

 variableName = [];  
 constantName = {};
  
{{message?.value  ? message?.value?.length : 0 }} of 500 characters