Question

我正在开发一个有角度的应用程序，其中我使用诸如 {{this.result}} 之类的数据绑定方式显示该变量 this.result 的数据。按提交时，它将调用一个更改 this.result 值的函数。但它并没有改变HTML视图。它正在显示旧数据。我想这很幸福，因为我需要刷新HTML。对于临时修复，我可以做 document.getElementById（''）。innerHTML ='abcd'，但是我读了一些你不应该做innerHTML的地方，即angular。中的getElementById。

所以，我有2个问题

如何代替DOM操作？
为什么不进行DOM操作？是不是Angular内部使用DOM Manipulation？

我正在做一个类似的按钮

代码段：

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>

TypeScript文件

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)
}

在控制台中，我看到字段值正在更改

Answer 1

在角度上，无需刷新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.

如果您对此有任何疑问，请在下面发表评论。

Answer 2

我确实喜欢

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

变量从到的位置正在改变。

是错误还是有任何解释？

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

2 个答案: