【问题标题】:How to manually force a rerender of a component in Angular2?如何手动强制重新渲染Angular2中的组件?
【发布时间】:2019-03-18 18:45:29
【问题描述】:

我正在使用 ng Smarttable 并通过事件更改数据源数组(更改是数组内值的 id 更改)。问题是 Angular 没有检测到更改,直到我将鼠标悬停在页面上或单击某处之前什么都没有发生。

因此,更改会在幕后正确应用,并且一旦我单击某处,角度就会“看到”这些更改。

所以我可以手动点击很多次来查看 chaning 属性,但这不是我们想要的。

我试过了:

  1. 在我更改数组的函数中使用 ChangeDetectorRef (markAsChanged & DetectChange)
  2. 数组更改后手动进行点击事件
  3. 使用不变性 (this.data= [...this.data];)

有可能有这样的东西吗?

this.renderer.refresh();

还是只使用 ng smartable 的一个功能?

编辑:看起来问题出在我这边。当您“刷新”智能表时,您会得到一个仅在加载完成后执行的承诺。

我没有使用承诺。将普通的 DetectChange() 放入 Promise 中使其工作

【问题讨论】:

  • 你试过不变性吗?例如,当您更改数据源时,您有一个 data 数组,请尝试在事件侦听器中写入此行:this.data = [...this.data]
  • 是的,它不工作
  • 您能在此处或 Stackblitz 上发布您的代码的 sn-p 并告诉我们当前和期望的行为吗?
  • 不幸的是,我认为这是不可能的,因为它的代码来自工作
  • 你试过ng2-smarttable的刷新方法吗:github.com/akveo/ng2-smart-table/issues/109#或者看看他们的文档

标签: angular angular-template ng2-smart-table


【解决方案1】:

您可以使用应用程序参考手动重新渲染。

将 ApplicationRef 注入您的组件。

constructor(appRef: ApplicationRef) {}

然后在你想重新渲染的时候调用tick方法

appRef.tick();

【讨论】:

  • 对于特定于库的解决方案,请查看此线程。 github.com/akveo/ng2-smart-table/issues/718
  • @加载中很棒。但是对于您提出的问题,如何进行手动重新渲染,这就是答案。
  • 这太棒了!又好又短。非常感谢!
猜你喜欢
  • 2016-12-14
  • 1970-01-01
  • 2019-11-12
  • 2016-12-31
  • 2014-04-20
  • 2017-05-08
  • 1970-01-01
  • 2018-10-27
  • 2016-05-08
相关资源
最近更新 更多