时间戳

首页 > 解决方案 > 变量值变化时如何更新html中的数据

angular - 变量值变化时如何更新html中的数据

问题描述

我正在开发一个角度应用程序，我正在使用像{{this.result}}这样的单向数据绑定来显示该变量this.result的数据。当按下提交时，它会调用一个改变this.result值的函数。但它不会改变 HTML 视图。它显示的是旧数据。我想这正在发生，因为我需要刷新 HTML。对于临时修复，我可以做document.getElementById('').innerHTML = 'abcd'，但我读了一些你不应该做innerHTML，getElementById in angular的地方。

所以，我有2个问题

我正在做一个喜欢的按钮

代码片段：

HTML 文件

<div style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'">
   {{ this.likedBy}} liked<i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"></i>&nbsp;
</div>

打字稿文件

toggle()
{
   this.isLiked = !this.isLiked;
   if(this.isLiked === true)
   {
      console.log('You liked this idea now');
      this.likedBy.push(this.adalService.userInfo.profile.email);

   }else{
      console.log('You unliked this idea now');
      this.likedBy.splice(this.likedBy.indexOf(this.adalService.userInfo.profile.email), 1);
   }
   console.log('Latest liker :- ' + this.likedBy)
}

在控制台中，我可以看到字段值正在发生变化

标签： angular

解决方案

在 Angular 中，无需刷新 HTML 页面即可从.ts.

我将在这里用注释重写您的代码，以便您更好地理解它。

HTML

<div style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'">
  <div *ngFor="let likedByItem of likedBy">
  {{likedByItem}},
  </div> liked<i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"></i>&nbsp;
</div>

打字稿文件

toggle()
{
  this.isLiked = !this.isLiked;
  if(this.isLiked === true)
  {
     console.log('You liked this idea now');
     this.likedBy.push(this.adalService.userInfo.profile.email);
  }
  else
  {
     console.log('You unliked this idea now');
     this.likedBy.splice(this.likedBy.indexOf(this.adalService.userInfo.profile.email), 1);
  }
     console.log('Latest liker :- ' + this.likedBy)
}
// Here likedBy is an array. 
// For displaying this array you have to use *ngFor directive in html.

如果您对此有任何理解问题，请在下方发表评论。

推荐阅读