2017-04-27 60 views
0

我有这样的两个组成部分:有条件的工作不正常?

<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掌握和==“创造”!

[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:

如果要禁用一个按钮,你应该使用它作为 disabled="disabled"哪里,你都将其设置为true或false引导的
"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"} 
     ], 
+0

是什么'master'的和'action'指TI – Aravind

+0

主只是我知道这是模板中的第一个组件,以及我有一些功能的动作..create,编辑,更新,所以我想只显示创建 – None

+0

我添加了按钮的HTML它看起来像 – None

回答

1

我不知道如果我正确地得到它,但是,你第二部分:

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

我们知道,master=false然后!master=true。 当我们在按钮“创建”,action.name =='create'是真的,然后action.name !== 'create'是错误的。

我们有true && false = false所以这是正常的,你的按钮没有被禁用。

我不知道这是否是你想要的,但如果你只是想显示在按钮上主创造,你可以把:

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

多数民众赞成它... tnx :) – None

0

文件说..

使用实现此功能的功能如下

<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

+0

当你在[禁用] – Powkachu

+0

中放置一个布尔值时,它会工作,它将禁用所有三个按钮。你尝试过吗? – Aravind

+0

我一般在说话,我把布尔值在我的[禁用]属性,它的工作原理。当你使用'[disabled]'作为属性绑定时,你不需要函数 – Powkachu