显示隐藏成功失败警报

Question

我正在使用Angular 5。我要做的是根据如下所示执行的代码块显示成功/失败Alert。

showerror是布尔值。

 ...
.subscribe(data =>{
        this.showerror = false
    },
      error =>{
        this.showerror = true
      }
    );

我的HTML看起来像这样：根据上面的TS代码输出的结果，我只想显示以下成功/失败代码块之一。有人可以在这里帮我吗。

<div class="alert alert-success" role="alert" [hidden]="{{showerror}}">
  success !! you did it
</div>
<div class="alert alert-danger" role="alert" [hidden]="{{showerror}}">
  Fail!!!
</div>

Answer 1

删除注释 {{}} ，

<div class="alert alert-success" role="alert" [hidden]="showerror">

Answer 2

您可以尝试像这样自定义$mdDialog：-

 ...
.subscribe(data =>{
        alert = $mdDialog.alert()
                  .title('success !! you did it')
                  .ok('Close');
                  $mdDialog.show(alert).finally(function() {
                      alert = undefined;
                    });;
    },
      error =>{
        alert = $mdDialog.alert()
                  .title('Fail!!!')
                  .ok('Close');
                  $mdDialog.show(alert).finally(function() {
                      alert = undefined;
                    });;
      }
    );

Answer 3

 <div class="alert alert-success" role="alert" [hidden]="!showerror">
    success !! you did it
  </div>

<div class="alert alert-danger" role="alert" [hidden]="showerror">
  Fail!!!
</div>