javascript - 为什么 ngOnInit 变量更改不会影响 Angular 2/4 中的 html？

Question

我有我正在订阅的用户对象。如果用户等于某个名称，则不应显示按钮。我不知道为什么它不影响html中的ngIf。

我的 HTML

 <input *ngIf = "showDelete" type = "button" (click) = 
 "deleteCustomer(customer._id)" value = "Delete" class = "btn btn-danger">

appcomponent.ts 中我的 ngOnInit

    ngOnInit() {

let showDelete:boolean =true;

this.authService.getProfile().subscribe(profile => {
  this.username = profile.user.name

  if (this.username=="admin"){

    showDelete=false;
  }
},

如果我 console.log this.username 并显示删除，我会得到预期的值，但它不会改变 html 中的逻辑

Answer 1

您应该将 showDelete 变量声明为组件的一部分，以便可以从模板访问它:

public showDelete: boolean = true;

ngOnInit(): void {
    this.authService.getProfile().subscribe(profile => {
        this.username = profile.user.name;
        if (this.username == "admin") {
            this.showDelete = false;
        }
    });
}