чи є альтернатива для 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.