Question

Angular 9 属性长度 - 无法读取未定义的属性“长度”

2020-05-11

2093

angular typescript

我在 Angular 9 和 TypeScript 中有一个 Web 应用程序。在 html 文件中，当字符串长度小于 10 时，我想禁用按钮。我的 html 代码：

<div class="p-2 form-group">
              <textarea type="text" class="form-control" id="inputCommentBody" placeholder="Text" [(ngModel)]="postCommentModel.body" rows="3"></textarea>
            </div>

<button class="btn btn-primary" (click)="addPostComment(post.id, null)" [disabled]="postCommentModel.body !== undefined || postCommentModel.body.length < 10">
              Add comment
            </button>

在 TypeScript 中，代码如下所示：

export class UserPageComponent implements OnInit {
  public postCommentModel: any = {};

出现错误：

ERROR TypeError: Cannot read property 'length' of undefined
    at UserPageComponent_div_13_Template (user-page.component.html:113)
    at executeTemplate (core.js:12059)
    at refreshView (core.js:11906)
    at refreshDynamicEmbeddedViews (core.js:13283)
    at refreshView (core.js:11929)
    at refreshComponent (core.js:13358)
    at refreshChildComponents (core.js:11635)
    at refreshView (core.js:11958)
    at refreshDynamicEmbeddedViews (core.js:13283)
    at refreshView (core.js:11929)

Answer 1

您正在访问一个未定义的对象。解决方案是检查是否为 null 或 undefined（以查看对象是否存在），然后才进行迭代。

<button class="btn btn-primary" (click)="addPostComment(post.id, null)" [disabled]="postCommentModel.body === undefined || postCommentModel?.body?.length < 10">

Answer 2

代码中的一个小错误

此处的目的是检查字段值的长度。

将 || 更改为 && 运算符，不会出现该错误 。这将确保 postCommentModel.body 具有值，然后仅进行长度检查。

使用 OR (||) 运算符，它会在页面加载时直接满足第二个条件，因为 postCommentModel.body !== undefined 为 false 。

<button class="btn btn-primary" (click)="addPostComment(post.id, null)" [disabled]="postCommentModel.body !== undefined && postCommentModel.body.length < 10">