Блог

Главная - Вопросы по программированию - Кнопки не отключены при инициализации компонента

Кнопки не отключены при инициализации компонента

#html #angular #typescript

#HTML #angular #typescript

Вопрос:

Я использую свойство [disabled], чтобы решить, следует ли отключать элементы button или нет, в зависимости от того, возвращает array.length 0 или нет.

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

typescript

 constructor() {
    this.macrosSelected = [];
  }

HTML

 <button
          type="button"
          class="btn btn-secondary"
          [disabled]="!macrosSelected.length"
>

Как я уже сказал, этот код включает кнопку, когда в массиве есть объект внутри него, и отключает ее, как только массив возвращается в пустое состояние.

Комментарии:

1. Я не уверен, устраняет ли это проблему, но я бы посоветовал вам инициализировать ваши данные на ngOnInit вместо конструктора

2. Вы уверены, что в вашей консоли нет ошибок? возможно, macrosSelected есть null в начале. Вы могли бы использовать [disabled]="!macrosSelected?.length"

3. @StPaulis Я пробовал это раньше, а также инициализировать массив при объявлении переменной

4. Можете ли вы предоставить общий доступ к stackblitz?

Ответ №1:

Поскольку вы назначили macrosSelected = [] в своем конструкторе, то это будет начальное значение вашей переменной. Если вы назначаете эту переменную с помощью @Input() декоратора или службы, они обновят эту переменную после того, как вызов конструктора означает второе присвоение. Таким образом, вы можете просто проверить длину macrosSelected переменной, как показано ниже.

Код вашего шаблона должен быть похож:

 <button type="button" class="btn btn-secondary" [disabled]="macrosSelected.length === 0"></button>