如何在Angular中显示/隐藏按钮

时间:2019-09-23 17:40:50

标签: javascript angular typescript

当按钮状态为“批准”且“批准”按钮为“待定”状态时,我想显示“拒绝”按钮。我正确传递了值,但两个按钮始终显示。

这是我的.ts文件

    export class NotificationComponent implements OnInit {

      notices: notification[] = [];
      public approve_show: boolean = false;
      public disapprove_show: boolean = false;

      constructor(
        private http: HttpClient,
        private router: Router,
      ) { }

      ngOnInit() {

    var url = "http://localhost:3000/notification/view";

    this.http.get<any>(url).subscribe(res => {
      this.notices = res;
      var i = 0;

      for (var prop in res) {
        if (res.hasOwnProperty(prop)) {
          // console.log(res[i].state)          
          if (res[i].state == 'Approved') {
            console.log("approved")
            this.disapprove_show = true
          }
          else {
            this.approve_show = true
          }
          i++;
        }
      }

    }, (err) => {
      console.log(err);
    });
  }
}

这是我的html代码

<button *ngIf="approve_show" mat-raised-button class="approve_btn">Approve</button>
<button *ngIf="disapprove_show"  mat-raised-button color="warn" style="width:100px;">Disapprove</button>

3 个答案:

答案 0 :(得分:2)

为什么,您的代码很好。 您应该解决在this.disapprove_show = true之后添加this.approve_show = false,在this.approve_show = true之后添加this.disapprove_show = false的问题。

问题在于两个变量同时为真。

答案 1 :(得分:1)

using System.Collections.Generic;

class Startup
{
    static void Main()
    {
        int entry = 1233;
        List<Info>[] test = new List<Info>[entry];

        for (int i = 0; i < 500 ; i+=3)
        {
            Info info1 = new Info()
            {
                capacity = i * 2,
                name = i.ToString()
            };
            test[i].Add(info1);
        }
        for (int i = 0; i < 1000; i+=5)
        {
            Info info2 = new Info();
            info2.capacity = i * 2;
            info2.name = i.ToString() + i.ToString();
            test[i].Add(info2);
        }
    }

    struct Info
    {
        public int capacity;
        public string name;
    }
}

根据要求,似乎一次只能看到一个按钮...

如果我错了,请告诉我...

答案 2 :(得分:1)

由于您将其用作列表,请使用以下内容。 <button *ngIf="res.state=='Approved'" mat-raised-button color="warn" style="width:100px;">

问题是您在按钮上使用了全局变量。