Question

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

我尝试使用以下方式访问信息：

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

但是会出现此错误：

src / app / layout / products / products.component.ts（93,18）中的错误：错误TS2352：类型'HTMLCollectionOf'无法转换为类型'HTMLInputElement'。类型“ HTMLCollectionOf”中缺少属性“ accept”。 src / app / layout / products / products.component.ts（111,14）：错误TS2352：类型“ HTMLCollectionOf”无法转换为类型“ HTMLInputElement”。

编译失败

Visual Studio建议我除unknown之外还包括HTMLInputElement来访问信息，所以我尝试：

let input = (<HTMLInputElement><unknown>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>

我希望能够无任何错误地访问数据，以便我可以编译应用程序以运行。

Answer 1

由于尝试将HTMLCollection强制转换为HTMLElement，所以出现编译错误。

您对document.getElementsByClassName()的调用未返回HtmlElement，而是返回了HTMLCollection。 https://developer.github.com/v3/search您需要更新演员表，然后访问集合的第一个元素（如果存在）。

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

话虽如此，在使用Angular时，强烈建议在这种情况下使用指令。相反，我会使用[(ngModel)]指令或构建反应形式来访问输入值。

无法编译HTMLCollectionOf <element>

1 个答案: