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

对于带有对象的数组，角度将无法检测到变化。因此，您需要将新数组提供为JSON.parse(JSON.stringify(MENU_ITEMS))

将html变量绑定到打字稿

1 个答案: