变量更改时Angular 6模板不会更新答案

【问题标题】：Angular 6 template doesn't update when variable changes变量更改时Angular 6模板不会更新
【发布时间】：2020-06-24 14:14:42
【问题描述】：

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

我们希望 MemberProfile 链接显示用户 ID，而不是初始化时使用的“未定义”。

查看堆栈闪电战链接。

这很简单，我知道我缺少一些简单的东西。

当您打开菜单时，我会打印出链接标签和链接 URL。第二个链接应该是Admin/MemberProfile/45 而不是Admin/MemberProfile/undefined

【问题讨论】：

【解决方案1】：

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

与您的情况一样，由于您是从数组menu.admin 呈现菜单链接列表。 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。

【讨论】：

【解决方案2】：

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

'/Admin/MemberProfile/' + this.userId

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

this.userId = 45;

menu 的值不再计算。

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

玩家的选择。

【讨论】：