mat-menu с элементами меню dynamici c отображает один и тот же объект данных вместо переданного объекта

Question

Моя проблема связана с angular меню материалов (mat-menu).

Я создал этот репо, который демонстрирует проблему: https://stackblitz.com/edit/angular-snymga

Меню отображает динамический набор элементов c, например, если моя колода закрыта, в меню будет пункт "Сделать публикацию c" и наоборот "Сделать приватной", если колода опубликована c.

Кроме того, каждая карта принадлежит к другой колоде и поэтому имеет разные заголовок, идентификатор карты, и я хочу, чтобы каждый щелчок в меню вызывал событие с действием и идентификатором карты, которая была активирована.

В В примере вы можете видеть, что карты имеют разные названия и видимость, как и ожидалось.

Проблема в том, что отображаемые элементы меню всегда отображают один и тот же экземпляр menuData, а не экземпляр модели menuData, который передается в качестве входных данных. как будто mat-menu-items действует как отдельный элемент, вместо создания экземпляра для каждого предоставленного menuData.

Я также видел, что ngInit компонента ui-card-menu инициализировался только один раз.

В предварительном просмотре репо видно, что все меню разных колод имеют пункт меню «Сделать публикацию c» вместо изменения в соответствии с видимостью колоды.

Answer 1

Проблема в том, что когда вы клонируете данные меню, вы выполняете неглубокое клонирование вместо глубокого клонирования. Поэтому, когда вы меняете идентификатор для пунктов меню, вы меняете идентификатор для всех меню.

В компоненте вашей пользовательской карты, если вы измените эту строку, которая выполняет мелкий клон:

this.menuDataCloned = {...this.menuData};

Измените это на следующее, что делает глубокий клон:

this.menuDataCloned = JSON.parse(JSON.stringify(this.menuData));