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

我是angular的新手，我试图理解为什么我的addEventListener方法不起作用？我试图做的是创建一个删除按钮，从我的输入中删除一个已发布的数组。该数组嵌套在mat card标记中，并具有一个元素引用，我在typescript中使用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>

Post Component.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)
    }
}

export class PostsComponent {
  hideList = false;

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

---

如果我正确理解了您的问题，则您不希望在运行

removeList（）

函数后显示

组件

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

那么，这肯定只是使用

*ngIf

的一种情况吗

存储组件中是否应隐藏

的状态（默认为false），并在事件处理程序运行时将其更新为true。将

*ngIf

绑定到此属性，以允许Angular在为true时将其从DOM中删除

组件技术

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

export class PostsComponent {
  hideList = false;

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

component.html

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

删去

我对此有点困惑。为什么要使用

addEventListener

而不是

（单击）

？

inputField

是数组还是对象？它被声明为一个对象，但是你调用它的一些属性就好像它是一个对象一样。我使用cardRef的mat card引用访问DOM/html我使用了在ngAfterViewInit中初始化的view子选项，我想我不必调用addEventListener，但是我如何引用回html div（mat card）我正在尝试在单击按钮时删除。你是对的，它应该是一个对象而不是数组