Angular 5中的属性更改时如何正确更新UI答案

【问题标题】：How to proper update UI when a property changes in Angular 5Angular 5中的属性更改时如何正确更新UI
【发布时间】：2019-01-05 03:38:14
【问题描述】：

我正在尝试自动更新 UI，避免使用 jQuery。我只想在单击发生后更新按钮的 css。

应该在 html 中使用内联 javascript 代码还是 typescript 组件来完成？

现在我正在评估后者，在 typescript 中处理 CSS 如下。

改变其alreadyLiked属性的组件：

sendLike(recipientId: number) {
  this.userService.sendLike(fromUserId, this.user.id).subscribe(data => {
      this.alertifyService.success('You have liked ' + this.user.name);

     // any way to update UI without this trash?
     const btnLikeMe = <HTMLInputElement> document.getElementById('btnLikeMe');
     btnLikeMe.classList.remove('btn-primary');
     btnLikeMe.classList.add('btn-success');
     btnLikeMe.classList.add('active');
     btnLikeMe.disabled = true;

   }, error => {
        this.alertifyService.error(error);
   });
}

alreadyLiked 更改后，我想在 HTML 中自动更新 btnLikeMe css：

<button id="btnLikeMe" class="btn" (click)="sendLike(user.id)"
[disabled]="alreadyLiked"
[ngClass]="alreadyLiked ? 'btn-success active' : 'btn-primary'"
title="{{alreadyLiked?'You already liked me. Thank you' : 'Like me now!'}}">
Like
</button>

它正在工作，但它似乎是一个不好的方法。我正在使用"@angular/core": "^5.2.0"

【问题讨论】：

标签： html typescript angular5

【解决方案1】：

您不需要为此使用 JQuery。 NgClass 是正确的方法。

NgClass 在 HTML 元素上添加和删除 CSS 类。

在某些时候，如果你想做更复杂的事情，你可以调用函数...[ngClass]="getClass()" 然后你可以调试，但你不能在 HTML 中这样做。当你必须触摸 DOM 时，你应该使用 Renderer2。

【讨论】：

ngstyle-vs-renderer2