Angular 将单击事件动态分配给元素时，公共属性显示为未定义

在画布中添加事件时遇到问题。我有一个画布，上面有几个图像，我的“diagram”变量中有所有图像的ID。我想单击元素，在图数组中查找ID，并显示此描述。在下面的代码中，我的图表显示为未定义，我不明白为什么。事先非常感谢

export class EngineComponent implements OnInit {

  public diagram = [
    {itemName: 'st', itemType: 'start', description: 'Beginning of the manufacturing process'},
    {
      itemName: 'op2',
      itemType: 'operation',
      description: 'Production process of the items'
    },
    {
      itemName: 'op3',
      itemType: 'operation',
      description: 'Error in the product packaging process'
    }
  ]

  click(item: any) {
    const itemName = item.target.parentElement.id;

    item = this.diagram.find(p => p.itemName === itemName);

    if (item) {
      this.showDescription = item.description;
    }
  }

  ngOnInit(): void {
    this.diagram.forEach(item => {
      document.getElementById(item.itemName)
        .addEventListener('click', this.click.bind(this.diagram));
    });
  }
}

发件人：

bind（）

方法创建一个新函数，该函数在调用时具有

此

关键字设置为提供的值，并具有给定的 调用新函数时，将在任何函数前面提供参数

因此，用以下函数替换

click（）

函数应该可以正常工作

public click(event: any) {
  const itemName = event.currentTarget.id;

  Object.keys(this).some((key) =>  {
    if (this[key].itemName === itemName) {
      this.showDescription = this[key].description; 
    }
  });
}

工作示例：