Question

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

代码如下：

namespace MyProject.WebParts.PrintWP.PrintEngine
{
    [ToolboxItemAttribute(false)]
    public class PrintEngine : WebPart
    {

        protected List<EtichettaFacoltativaModel> etichetteFacoltativeList;
        protected override void CreateChildControls()
        {
            Page.Header.Controls.Add(new LiteralControl("<link href=\"/_layouts/15/MyProject/Chosen/css/chosen.css\" rel=\"stylesheet\" type=\"text/css\" media=\"screen\" />"));

            .....................................................
            .....................................................
            .....................................................

            Page.Controls.Add(new LiteralControl("<script src=\"/_layouts/15/MyProject/Chosen/js/chosen.jquery.js\" type=\"text/javascript\"></script>"));
            Page.Controls.Add(new LiteralControl("<script src=\"/_layouts/15/MyProject/Chosen/js/chosen.proto.js\" type=\"text/javascript\"></script>"));
        }
    }
}

根据上面的代码，它还显示了每个用户的在线状态，因此我需要添加一些内容而无需碰触上面的行。

这是HTML部分：

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

我认为应该在上面的div中添加ngIf。但是如何解决这个问题？

Answer 1

获得当前用户名后，将其保存到打字稿中，例如

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

假设您必须将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 here

让布尔值知道它是否是用户的个人资料。

假设此布尔值称为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>

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

3 个答案: