Angular 6 变量更改时模板不更新

Question

我有一个菜单对象，它最终会在模板上显示一个菜单。菜单对象属性之一由在 ngOnInit() 期间更改的变量设置。那时，我相信模板已经创建，所以菜单永远不会更新。

我们希望 MemberProfile link 显示用户 ID，而不是 'undefined' 用于初始化的 ID。

查看堆栈闪电战 link。

这很简单，我知道我遗漏了一些简单的东西。

当您打开菜单时，我正在打印 Link 标签和 Link URL。第二个 link 应该是 Admin/MemberProfile/45 而不是 Admin/MemberProfile/undefined

Answer 1

当属性 menu 被声明并赋值时，这个表达式

'/Admin/MemberProfile/' + this.userId

使用 userId 当时的当前值进行评估。当你这样做时

this.userId = 45;

menu 的值不再计算。

有几种可能的解决方案。将菜单布局放在模板中，而不是 TS（并在那里使用 {{ userId }}），使用 RxJS 动态更新事物，或者在更改 userId 时简单地强制重新计算 menu 的值（最粗略的解决方案，对我来说需要最少的写作），显示在这里：

玩家的选择。

Answer 2

首先，您需要了解 template/html 在 Angular 中的渲染是如何工作的。

与您的情况一样，由于您是从数组 menu.admin 中呈现菜单 link 列表。 Angular 不会重新渲染 *ngFor 块，直到它检测到 menu.admin 数组中的更改。所以，你只需要更新那个数组。

现在，你能做的就是这样，

public ngOnInit() {
   this.userId = 45;

   this.menu.admin[this.menu.admin.length - 1].link = '/Admin/MemberProfile/' + this.userId
}

更多信息请参考Angular lifecycle hooks。

Angular 6 template doesn't update when variable changes