我的问题涉及角度材料菜单（mat-菜单）。
我创建了这个仓库来演示这个问题：https://stackblitz.com/edit/angular-snymga
[菜单呈现动态项目集，例如，如果我的卡座是私人的，则菜单将具有“公开”项目，反之亦然，如果卡座是公共的，则菜单将具有“设为私人”。
而且每张卡都属于不同的牌组，因此具有不同的标题，卡ID，我希望每次单击菜单都会引发一个事件，其中包含触发的卡的操作和ID。
在示例中，您可以看到卡片的标题和可见性与预期的不同。
问题是，呈现的菜单项始终呈现相同的menuData实例，而不是作为输入传递的menuData模型的实例。就像mat-menu-items充当singelton一样，而不是根据提供的menuData进行实例化。
我还看到ui-card-menu组件的ngInit仅初始化一次。
您可以在回购预览中看到-不同平台的所有菜单都具有“公开”菜单项，而不是根据平台的可见性进行更改。
问题是，在克隆menuData时，您执行的是浅层克隆，而不是深层克隆。因此，当您更改菜单项上的ID时，您正在更改所有菜单上的ID。
在您的ui卡组件中，如果更改此行，则将执行浅表克隆：
this.menuDataCloned = {...this.menuData};
将其更改为它，这将进行深层克隆：
this.menuDataCloned = JSON.parse(JSON.stringify(this.menuData));