如果列表/数组不为空，如何禁用 Angular 中的按钮？答案

【问题标题】：How to disable button in Angular if list / array is not empty?如果列表/数组不为空，如何禁用 Angular 中的按钮？
【发布时间】：2018-07-05 18:01:41
【问题描述】：

在我的组件中，我从我的服务中获取数据：

ngOnInit() {
  this._sharedService.
    getReceiptItem().takeUntil(this.ngUnsubscribe).
    subscribe(products => this.receiptItems = products);
}

如果我的数组this.receiptItems 有任何项目，我该如何禁用按钮？

我尝试过这样的事情：

 <div class="top-left">
    <button [disabled]="receiptItems.count>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
 </div>

但不知不觉这不是解决方案..

谢谢

【问题讨论】：

标签： javascript html angular css-selectors angular-services

【解决方案1】：

你需要Array.length javascript

   <button [disabled]="receiptItems.length>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>

【讨论】：

执行此操作 [disabled]="receiptItems?.length
是的。非常感谢您的帮助

【解决方案2】：

使用以下代码更新您的代码：

<div class="top-left">
    <button [disabled]="receiptItems && receiptItems.length>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
 </div>

【讨论】：

【解决方案3】：

你可以试试length

组件.ts

receiptItems:Array<any>;
ngOnInit() {
  this._sharedService.
    getReceiptItem().takeUntil(this.ngUnsubscribe).
    subscribe(products => this.receiptItems = products);
}

component.html

<div class="top-left">
    <button [disabled]="receiptItems.length > 0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>
 </div>

【讨论】：

【解决方案4】：

<button *ngIf="receiptItems!=undefined" [disabled]="receiptItems.length>0" type="button" [routerLink]="['/administration']"><i class="fas fa-bars fa-fw"></i></button>

【讨论】：