Привязать html переменную к машинописи

Question

Это мой компонент:

@Component({
  selector: 'ngx-pages',
  styleUrls: ['pages.component.scss'],
  template: `
    <ngx-one-column-layout>
      <nb-menu [items]="menu"></nb-menu>
      <router-outlet></router-outlet>
    </ngx-one-column-layout>
  `,
})
export class PagesComponent {
  constructor(private translate: TranslateService) {
    console.log(this.translate.instant('adminPanel'));
  }

  menu = MENU_ITEMS;

  ngOnInit(): void {
    MENU_ITEMS[0]["title"]= this.translate.instant('adminPanel');
    this.menu = MENU_ITEMS;
  }
}

Все работает нормально, но изменение переменной menu при перезаписи не изменится в html, пока я не выйду из страницы и не войду снова, указывает, что оно было изменено поздно и не поддерживает изменение динамически. Я попытался назначить EventEmitter в меню nb, но не могу, так как не могу ввести nb-menu, чтобы изменить его изнутри, потому что это тег нулевой формы (кадр, который я скачал)

Answer 1

Попробуйте присвоить значение как

  ngOnInit(): void {
    MENU_ITEMS[0]["title"]= this.translate.instant('adminPanel');
    this.menu = JSON.parse(JSON.stringify(MENU_ITEMS));
  }

Для массива с объектами angular не сможет обнаружить изменения. Итак, вам нужно предоставить новый массив как JSON.parse(JSON.stringify(MENU_ITEMS))