如何根据列表的长度禁用按钮

Question

我希望用户只能选择一个标签。因此，在用户将一个标签推送到列表后，应该禁用该按钮。所以我想出了一个想法，如果 list.length 大于 0，则应该禁用该按钮。但不知何故，它在我的方法中不起作用。

page.html

 <ion-item>
      <ion-input mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
      <ion-button [disabled]="!categoryForm.valid" [disabled]="tagList?.length > 1"  item-right type="submit" icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>

page.ts

  public tagInput: string = '';
  public tagList: any[] = [];

constructor() {}
...
addTag() { // properly access and reset reactive form values
  const tagCtrl = this.categoryForm.get('category');
  if (tagCtrl.value) {
    this.tagList.push(tagCtrl.value);
    this.tagInput = ''; // in order to have an empty input
  }
}

Answer 1

您使用了两次禁用属性：

<ion-item>
      <ion-input mode="md" formControlName="category" clearInput="true" placeholder="Tag" name="tagValue"></ion-input>
      <ion-button [disabled]="!categoryForm.valid || tagList?.length > 0"  item-right type="submit" icon-only>
      <ion-icon name="checkmark"></ion-icon>
    </ion-button>
    </ion-item>