Javascript 未能编译HTMLCollectionOf<；元素>；

我正在编写一个电子商务应用程序，所以当用户单击“添加到购物车”时，我会弹出一个弹出窗口，允许用户选择用户要添加的产品的种类和数量。弹出窗口包括选择表单和数字输入。然后，我必须访问这些文件中输入的内容，以便在购物车中显示适当的信息

我试图通过以下方式访问信息：

let input = (<HTMLInputElement>document.getElementsByClassName('number_input'));

但这就产生了这个错误：

src/app/layout/products/products.component.ts（91,37）中出错：错误TS2304:找不到名称“未知”。 src/app/layout/products/products.component.ts（109,33）：错误TS2304:找不到名称“未知”

这是我输入的代码。它利用了自举的一个模态

<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>

AGREGAR{{bebida.descripion}
可变的：
{{detalle.variedad}
康蒂达：
塞拉
阿格雷戈

---

我希望能够在没有任何错误的情况下访问数据，以便能够编译应用程序以运行。

由于您试图将

HTMLCollection

强制转换为

HTMLElement

，因此出现编译错误

调用

document.getElementsByClassName（）

不会返回

HtmlElement

，而是返回

HTMLCollection

。您需要更新cast，然后访问集合的第一个元素（如果它存在的话）

let numberInputs: HTMLCollection = document.getElementsByClassName('number_input');
let firstNumberInput: HTMLSelectElement = numberInputs[0];
console.log(firstNumberInput.value);

---

也就是说，在使用Angular时，强烈建议在这种情况下使用指令。我将使用

[（ngModel）]

指令或构建一个反应式表单来访问输入值。

您是否尝试过

？如果您使用的是Angular，则应该使用[（ngModel）]，而不是尝试访问DOM元素。因为

getElementsByClassName（）

可以提供DOM元素列表，您可以将其键入

。如果要单独处理每个元素，可以使用

给出以下错误：类型“HTMLCollectionOf”无法转换为类型“HTMLInputElement[]”。类型“HTMLCollectionOf”中缺少属性“includes”，而我在上文中尝试的对

的类型转换导致了最初的错误。还有其他想法吗？我现在要研究

[（ngModel）]

我知道这是一个集合，但我认为您可以将其转换为

HTMLInputElement

来访问输入。我一直在关注这篇github文章，mozilla链接谈到访问各个元素，但当我这样做时，我得到的属性“value”在typle元素

let input=（document.getElementsByClassName（'number_input'）上不存在；cantidad=输入[0]。值使用
[（ngModel）]
是一种有效的修复方法。谢谢
let numberInputs: HTMLCollection = document.getElementsByClassName('number_input');
let firstNumberInput: HTMLSelectElement = numberInputs[0];
console.log(firstNumberInput.value);