Question

我有这两个组成部分：

<app-z-grid [master]="true" title="Tip korisnika" *ngIf="showTab('Tip/podtip korisnika') || showTab('Tip korisnika')" [restPath]="'customertype'" (fillDetailParent)="reinit($event)"></app-z-grid>
     <app-z-grid title="Podtip korisnika" *ngIf="showTab('Tip/podtip korisnika') || showTab('Podtip korisnika')" [path]='"customerclassification/customerstype.json"' [restPath]="'customerstype'" [isDetail]="'customerstype'" [parentName]="'customertypeCode'" ></app-z-grid>

第一个有主人，第二人没有。

我想要的是将condtional设置为禁用按钮，如果它不是主要按钮，如果是action.name！==＆＃39; create＆＃39;：

[disabled]="(!master) && (action.name !== 'create')"

但问题是，这是不起作用我得到第一个组件所有按钮启用，并第二个第一个启用。有什么建议吗？

 <button *ngFor="let action of grid.actions" [disabled]="action.name !== 'create'" name="{{action.name}}"
                  type="submit" class="btn btn-block-container mousePointer" (click)="this[action.callback]('New', grid.actions)" title="{{action.label}}">
                  <i *ngIf="action.icon" style="color: white !important" class="{{action.icon}}"></i>
              </button>

JSON：

  "actions":[
          {"name":"create","label":"New", "icon":"fa fa-file buttonicon","disabled":false, "callback":"create"},
          {"name":"update","label":"Edit", "icon":"fa fa-pencil-square-o buttonicon", "disabled":true, "callback":"edit"},
          {"name":"deletemodal","label":"Delete", "icon":"fa fa-trash buttonicon", "disabled":true, "callback":"deletemodal"}
        ],

Answer 1

我不知道我是否正确得到它，但是，对于你的第二个组成部分：

[disabled]="(!master) && (action.name !== 'create')"

我们知道master=false然后!master=true。当我们在“创建”按钮上时，action.name =='create'为真，则action.name !== 'create'为假。

我们有true && false = false因此您的按钮未被停用是正常的。

我不知道这是不是你想要的，但如果你只想在master上显示创建按钮，你可以把：

[disabled]="(!master) || ((!master) && (action.name !== 'create'))"

Answer 2

bootstrap文档说如果要禁用按钮，则应将其用作disabled="disabled"，因为您将其设置为true或false ..

使用函数实现此目的

<button *ngFor="let action of data.actions" [disabled]="isDisabled(action)" name="{{action.name}}"
                  type="submit" class="btn btn-block-container mousePointer" (click)="this[action.callback]('New', grid.actions)" title="{{action.label}}">
      <i *ngIf="action.icon" style="color: white !important" class="{{action.icon}}"></i>
       </button>

代码

isDisabled(action):boolean{
    if(action.name !== 'create'){
      return 'disabled'
  }
  else return ''
}

<强> LIVE DEMO

条件不按预期工作？

2 个答案: