Ошибка компиляции HTMLCollectionOf <Element>
Я пишу приложение для электронной коммерции, поэтому у меня появляется всплывающее окно для пользователя при нажатии кнопки «Добавить в корзину», которое позволяет пользователю выбрать разнообразие и количество продукта, который пользователь хочет добавить. Всплывающее окно включает форму выбора и ввод числа. Затем мне нужно получить доступ к тому, что было введено в них, чтобы отобразить соответствующую информацию в корзине.
Я попытался получить доступ к информации, используя:
let input = (<HTMLInputElement>document.getElementsByClassName('number_input'));
Но это дает эту ошибку:
ERROR in src/app/layout/products/products.component.ts(93,18): error TS2352: Type 'HTMLCollectionOf' cannot be converted to type 'HTMLInputElement'. Property 'accept' is missing in type 'HTMLCollectionOf'. src/app/layout/products/products.component.ts(111,14): error TS2352: Type 'HTMLCollectionOf' cannot be converted to type 'HTMLInputElement'.
Не удалось скомпилировать
Visual Studio порекомендовала мне включить unknown в дополнение к HTMLInputElement для доступа к информации, поэтому я попробовал:
let input = (<HTMLInputElement><unknown>document.getElementsByClassName('number_input'));
Но это дает эту ошибку:
ERROR in src/app/layout/products/products.component.ts(91,37): error TS2304: Cannot find name 'unknown'. src/app/layout/products/products.component.ts(109,33): error TS2304: Cannot find name 'unknown'.
Это код для моих входов. Он использует модальное окно из начальной загрузки
<div class = "modal fade" id = "variedades_y_cantidades" tabindex = "-1" role = "dialog" aria-labelledby = "ModalCenterTitle" aria-hidden = "true">
<div class = "modal-dialog modal-dialog-centered" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<h5 class = "modal-title" id = "bebida_descripcion">AGREGAR {{ bebida.descripcion }}</h5>
</div>
<div class = "modal-body">
<div class = "row">
<div class = "col"><div class = "form-group">
<label for = "variadedes">Variaded:</label>
<select class = "form-control" id = "variadedes">
<option *ngFor = "let detalle of detalle_bebida">{{detalle.variedad}}</option>
</select>
</div></div>
<div class = "row"><div class = "col">Cantidad: <input type = "number" name = "cantidad" min = "1" style = "width: 70px;" class = "number_input" value = "1"></div></div>
</div>
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-secondary" data-dismiss = "modal">CERRAR</button>
<button type = "button" class = "btn btn-primary" (click) = "onModalAgregarClick($event)" data-dismiss = "modal">AGREGAR</button>
</div>
</div>
</div>
</div>
Я хочу иметь доступ к данным без ошибок, чтобы скомпилировать приложение для запуска.
Если вы используете Angular, вы должны использовать [(ngModel)] вместо того, чтобы пытаться получить доступ к элементу DOM.
Поскольку getElementsByClassName() может предоставить вам список элементов DOM, вы можете привести его к типу <HTMLCollection>. Если вы хотите обрабатывать каждый элемент индивидуально, вы можете использовать <HTMLInputElement>.
<HTMLInputElement[]> выдает эту ошибку: Тип «HTMLCollectionOf <Element>» не может быть преобразован в тип «HTMLInputElement []». Свойство «includes» отсутствует в типе «HTMLCollectionOf <Element>». Приведение типов к <HTMLInputElement> - это то, что я пробовал выше, что дало мне исходную ошибку. Есть другие идеи? Я собираюсь посмотреть [(ngModel)] прямо сейчас
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы получаете ошибку компиляции, потому что пытаетесь преобразовать HTMLCollection в HTMLElement.
Ваш вызов document.getElementsByClassName() не возвращает HtmlElement, он возвращает HTMLCollection. Вот полезная документация Mozilla по этой функции. Вам нужно будет обновить приведение, а затем получить доступ к первому элементу коллекции, если он вообще существует.
let numberInputs: HTMLCollection = document.getElementsByClassName('number_input');
let firstNumberInput: HTMLSelectElement = numberInputs[0];
console.info(firstNumberInput.value);
При этом при работе с Angular в этом случае настоятельно рекомендуется использовать директивы. Вместо этого я бы использовал директиву [(ngModel)] или создал реактивную форму для доступа к значениям входов.
Я знаю, что это Коллекция, но я подумал, что вы можете преобразовать ее как HTMLInputElement для доступа к входам. Я следил за этой статьей github ссылка на сайт Ссылка mozilla говорит о доступе к отдельным элементам, но когда я это делаю, я получаю свойство 'value' не существует для элемента типа let input = (document.getElementsByClassName('number_input')); cantidad = input[0].value;
использование [(ngModel)] было эффективным решением. Спасибо!
<HTMLInputElement[]>пробовали?