使用 ngFor 创建有条件禁用状态的按钮

Question

我正在尝试使用 ngFor 创建一个来自数组的按钮列表。我能够做到这一点，但我的问题是我需要在某些 "number" 之后禁用按钮，因为用户尚未达到该级别。

我想要创建的示例：（buttons/levels 如果尚未达到则禁用）

HTML 文件:

<ion-content padding>
    <ion-list>
      <button class="chap_btn" id="{{'btn_'+p}}" ion-button outline *ngFor="let p of pages" (click)="openPage(p)" [disabled]="setDisabled(p)">{{p}}</button>
    </ion-list>
</ion-content>

TS 文件:

@Component({
  selector: 'page-chapters',
  templateUrl: 'chapters.html'
})
export class ChaptersPage {
  public pages = [];
  public disabledBtn = false;

  constructor(public navCtrl: NavController, public glob:GlobalVariable) {
    this.pages = this.glob.chaptersBtn; // contains the number of LEVELS
    alert(this.pages)
  }

  setDisabled(p){
    if(p == this.glob.globalLevel.userLevel || p < 
this.glob.globalLevel.userLevel)
    {
     return true;
    }else{
      return false;
    }
   }


  openPage(p){
    this.navCtrl.push(LevelsPage, {
      level: p
    });
  }

如何设置按钮在"p"(number)超过用户等级时禁用？

谢谢

Answer 1

根据条件更改 disabled 属性，如下所示：

<button [disabled]="p > glob.hlobalLevel.userLevel">

使用 ngFor 创建有条件禁用状态的按钮

Using ngFor to create buttons with conditionally disabled status

cordova

ngfor

angular