angular2中的ng-disabled有什么替代方法吗？答案

【问题标题】：is there any alternative for ng-disabled in angular2?angular2中的ng-disabled有什么替代方法吗？
【发布时间】：2016-09-06 16:32:06
【问题描述】：

我正在使用 angular2 进行开发，想知道在 angular2 中是否有任何替代 ng-disabled 的方法。

例如。下面的代码在 angularJS 中：

<button ng-disabled="!nextLibAvailable" ng-click="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib >> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

只是想知道如何实现此功能？有输入吗？

【问题讨论】：

[disabled]="!nextLibAvailable" 试试这个可能会有所帮助

标签： angular angular-directive

【解决方案1】：

这是使用 anular 6 的解决方案。

[readonly]="DateRelatedObject.bool_DatesEdit ? true : false"

加上上面给出的答案

[attr.disabled]="valid == true ? true : null"

对我没有用，另外请注意使用 null 因为它期待 bool。

【讨论】：

[readonly]="DateRelatedObject.bool_DatesEdit ? true : false" 适用于 Angular 6+

【解决方案2】：

对于角度 4+ 版本，您可以尝试

<input [readonly]="true" type="date" name="date" />

【讨论】：

【解决方案3】：

是的，您可以设置 [disabled]= "true"，或者如果它是单选按钮或复选框，那么您可以简单地使用 disable

对于单选按钮：

<md-radio-button disabled>Select color</md-radio-button>

对于下拉菜单：

<ng-select (selected)="someFunction($event)" [disabled]="true"></ng-select>

【讨论】：

【解决方案4】：

[attr.disabled]="valid == true ? true : null"

您必须使用null 从 html 元素中删除 attr。

【讨论】：

对于 angular > 2.x，这是使用 [attr.disabled] 的正确方法
attr. 仅在元素没有 disabled 属性时才需要。对于按钮和输入元素等元素，attr. 是多余的。对于没有 disabled 属性的元素，绑定到 attr.disabled 仅在您通过 CSS 处理它以使其看起来像禁用时才有意义（鼠标指针、灰色......）
是的，当某些元素没有禁用属性默认值时，这是最好的方法。
您可以看到解决方案here - 它适用于您的组件 HTML [attr.aria-disabled]="myPropReflectingIfDisabled" 中的此属性。如果myPropReflectingIfDisabled 是true，它将添加一个属性aria-disabled="true"。

【解决方案5】：

要将disabled 属性设置为true 或false，请使用

<button [disabled]="!nextLibAvailable" (click)="showNext('library')" class=" btn btn-info btn-xs" title="Next Lib"> {{libraries.name}}">
    <i class="fa fa-chevron-right fa-fw"></i>
</button>

【讨论】：

仅适用于<button>,（这是真的吗？），这是合理的。否则会收到错误消息（即尝试绑定到 <a> 时）` 无法绑定到 'disabled'，因为它不是 'a' 的已知属性`
它适用于每个具有disabled 属性的元素。另见stackoverflow.com/questions/35431188/angular