如果用户在Angular中看自己/她自己的个人资料，如何不显示按钮

Question

所有用户都有自己的配置文件。当您检查其他用户的配置文件时，有一个按钮发送消息。问题是当您查看个人资料时，该按钮也出现在您自己的个人资料中。当我查看自己的个人资料时，如何隐藏该按钮？

这是代码：

ngOnInit() {
   this.user = this.tokenService.GetPayload();
   this.socket.emit('online', { room: 'global', user: this.user.username });
   this.socket.on('refreshPage', () => {
   this.GetUserData(this.name);
}); 

根据上述代码，它还显示了每个用户的在线状态，因此我需要添加一些东西而不触摸上线。

这是HTML部分：

<div class="col-md-5 col-sm-6 col-6">
  <a href="#" class="btn button-image closeButton btn-message float-right">Message</a>
</div>

我认为应该在上述Div中添加NGIF。但是如何解决这个问题？

Answer 1

获取当前用户名后，将其保存到typeScript

之类

ngOnInit() {
   this.ownUsername = localStorage.getItem('ownUsername');
   this.user = this.tokenService.GetPayload();
   this.socket.emit('online', { room: 'global', user: this.user.username });
   this.socket.on('refreshPage', () => {
      this.GetUserData(this.name);
   });
}

HTML应该看起来像这样：

<div *ngIf="user.username !== ownUsername" class="col-md-5 col-sm-6 col-6">
  <a href="#" class="btn button-image closeButton btn-message float-right">Message</a>
</div>

Answer 2

假设您必须在LocalStorage某个地方存储username？哪个用户已登录。

isMessageButtonShown() {
  const currentUser = localStorage.getItem('currentUser');
  if (this.user.username === currentUser) {
    return false;
  }
  return true;
}
<div class="col-md-5 col-sm-6 col-6">
  <a href="#" *ngIf='isMessageButtonShown()' class="btn button-image closeButton btn-message float-right">Message</a>
</div>

Answer 3

您应该在此处使用*ngIF

并有一个布尔来知道是否是用户的个人资料。

假设该布尔值称为 isItMe，如果它不是醋栗用户，则将其设置为false（在组件初始化中设置此布尔值）。

然后在模板中您会这样做：

<div *ngIf="!isItMe" class="col-md-5 col-sm-6 col-6">
  <a href="#" class="btn button-image closeButton btn-message float-right">Message</a>
</div>