Как показать / скрыть кнопки в Angular

Question

Я хочу показать кнопку «Отклонить», когда состояние кнопки «одобрить» и кнопку «Одобрить» в состояние «в ожидании».Я правильно передал значения, но обе кнопки показывают всегда.

Это мой файл .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>

Answer 1

Эх, твой код в порядке.Вы должны решить проблему, добавив this.approve_show = false после this.disapprove_show = true и this.disapprove_show = false после this.approve_show = true.

Проблема заключалась в том, что обе переменные были истинными одновременно.

Answer 2

, так как вы используете это для списка, используйте следующее.<button *ngIf="res.state=='Approved'" mat-raised-button color="warn" style="width:100px;">

Проблема в том, что вы используете глобальную переменную для кнопок.

Answer 3

    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
}

В соответствии с требованием кажется, что одновременно может быть видна только одна кнопка ...

Пожалуйста, дайте мне знать, если я ошибаюсь здесь ...