чи є альтернатива для ng-disabled у angular2?


145

Я використовую angular2 для розробки, і мені було цікаво, чи є альтернатива для ng-disabledangular2.

Для екс. нижче код знаходиться у 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>

Просто хотів дізнатися Як я можу досягти цієї функціональності? будь-які входи?


15
"! NextLibAvailable" [відключено] = спробувати це може допомогти
Маюр

Відповіді:


278

Щоб встановити 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>

5
Працює лише <button>,(це правда?), Що розумно. Ще отримайте повідомлення про помилку (тобто, коли намагаєтеся прив’язати до <a>): "Неможливо прив’язати до" відключеного ", оскільки це не відоме властивість" a "`
Red Pea

4
Він працює на кожен елемент, який має disabledвластивість. Дивіться також stackoverflow.com/questions/35431188/angular
Гюнтер Zöchbauer

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

Ви повинні використовувати nullдля видалення attr з html-елемента.


3
Для кутових> 2.x це правильний спосіб за допомогою [attr.disabled]
dale

12
attr.потрібен лише тоді, коли елемент не має disabledвластивості. Для таких елементів, як кнопки та елементи введення, attr.є зайвим. Для елементів, у яких немає disabledвластивості, на яку прив'язується, attr.disabledмає значення лише те, якщо ви
звернетесь

Так, це найкращий спосіб, коли для деякого елемента не вимкнено властивість за замовчуванням.
Viraj

Ви можете побачити тут рішення - воно працює з цим атрибутом у компонентах HTML [attr.aria-disabled]="myPropReflectingIfDisabled". Він додасть атрибут, aria-disabled="true"якщо myPropReflectingIfDisabledє true.
Netsi1964

6

Ось рішення, яке я використовую із вуглецевим 6.

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

плюс наведена відповідь

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

не працював для мене плюс знайте про використання нульової причини, оскільки він очікує bool.


[Тільки для читання] = "DateRelatedObject.bool_DatesEdit правди: помилкові?" Працює з кутовим 6+
somedev


0

Так, ви можете або встановити [disabled] = "true", або якщо це перемикач або прапорець, тоді ви можете просто скористатись відключенням

Для перемикача:

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

Для спаду:

<ng-select (selected)="someFunction($event)" [disabled]="true"></ng-select>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.