如何修复此未定义的 addEventListener 错误答案

【问题标题】：How to fix this Undefined addEventListener error如何修复此未定义的 addEventListener 错误
【发布时间】：2020-02-23 01:01:07
【问题描述】：

我是 Angular 新手，我想了解为什么我的 addEventListener 方法不起作用？我想要做的是创建一个删除按钮，从我的输入中删除一个发布的数组。该数组嵌套在一个 mat-card 标记中，并且有一个元素引用，我在我的打字稿中用 view child 调用了它。我得到的错误是：

错误类型错误：无法读取未定义的属性“addEventListener” 在 PostsComponent.ngAfterViewInit.

这是代码：

发布组件 HTML

<mat-card #cardRef [notes] ="inputField" class="inputField">    
  <ul>
    <li>
      {{inputField.name}}
      {{inputField.department}}
      {{inputField.message}}
    </li>
  </ul>
  <button (click)="removeList()">Delete</button>
</mat-card>

邮政服务

export class PostService

    public inputField = []

    removeDiv(id){
      const i = this.inputField.findIndex(res => res.id === id);
      if (i !== -1) {
        this.inputField.splice(i, 1)
      }
    }
}

发布组件.ts

export class PostsComponent {
    constructor(private Posts: PostService){}

    public inputField = [];    
    list;

    ngAfterViewInit(){
      this.cardRef.nativeElement.addEventListener('click',  
        this.removeList.bind(this))
    }

    removeList(){
      this.Posts.removeDiv(this.inputField.id)
    }
}

【问题讨论】：

我对此有点困惑。你为什么使用addEventListener 而不是(click)？ inputField 是数组还是对象？它被声明为一个对象，但是你调用它的一些属性就好像它是一个对象一样。
我有 cardRef 的 mat-card 引用来访问 DOM/html 我使用了我在 ngAfterViewInit 中初始化的视图子选项，我想我不必调用 addEventListener 但怎么做我指的是单击按钮时我试图删除的 html div（mat-card）。
你说得对，它应该是一个对象而不是一个数组

标签： angular

【解决方案1】：

如果我正确理解您的问题，您不想在运行removeList() 函数后显示<mat-card> 组件。

Angular 就是基于您的状态/模型动态构建 DOM。在我看来，这并没有什么不同。这不是从 DOM 中“删除元素”的情况，而是告诉 Angular 在任何给定时间它是否应该在 DOM 中。

那么肯定只是使用*ngIf的一个例子吗？

存储<mat-card> 是否应该在组件中隐藏的状态（默认为 false），并在事件处理程序运行时将其更新为 true。将*ngIf 绑定到该属性以允许Angular 在为true 时将其从DOM 中移除。

组件.ts

export class PostsComponent {
  hideList = false;

  removeList() {
    this.hideList = true;
  }
}

component.html

<mat-card *ngIf="!hideList">
  <button (click)="removeList()">Delete</button>
</mat-card>

【讨论】：