Javascript 如何以角度显示/隐藏按钮

我想在按钮状态为“批准”时显示“不批准”按钮，并将“批准”按钮显示为“待定”状态。我已正确传递值，但两个按钮始终显示

这是我的.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);
    });
  }
}

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

导出类NotificationComponent实现OnInit{
通知：通知[]=[]；
public approve\u show:boolean=false；
公众不赞成显示：布尔值=false；
建造师(
私有http:HttpClient，
专用路由器：路由器，
) { }
恩戈尼尼特（）{
变量url=”http://localhost:3000/notification/view";
this.http.get（url）.subscribe（res=>{
这是。注意=res；
var i=0；
for（在res中的var prop）{
如果（财产所有权）{
//console.log（res[i].state）
if（res[i].state==“已批准”）{
控制台日志（“已批准”）
这是真的
}
否则{
this.approve\u show=true
}
i++；
}
}
}，（错误）=>{
控制台日志（err）；
});
}
}

这是我的html代码

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

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

批准
不赞成

Ehy，您的代码很好。 您应该解决在这之后添加this.approve\u show=false.approve\u show=true和this.approve\u show=false.approve\u show=true的问题

问题是这两个变量同时是真的

    if (res[i].state == 'Approved') { 
console.log("approved") 
this.disapprove_show = true 
this.approve_show = false
} else {
this.approve_show = true 
this.disapprove_show = false
}

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

---

如果我错了，请告诉我

由于您将此用于列表，请使用以下内容。

---

问题在于，您需要为按钮使用全局变量。

调试代码。您可以多次循环，并在循环的不同迭代中执行if/else的两个部分。使用断点查看实际发生的情况。不需要两个变量。您可以使用

在条件中，GET调用返回的对象是什么？对于响应对象的某些属性，
approve\u show
设置为true，而对于其他属性，
approve\u show
设置为true。我也使用了此代码。但这是行不通的。无论如何，谢谢你。