Question

我正在使用VS Code，并且在我的代码中收到警告。我想我做错了什么，不过应用程序工作正常

<div class="search-wrapper">
  <input
    (keyup)="onKeyup($event)"
    type="search"
    id="searchInput"
    placeholder="Search..."
  />
  <button class="icon" (click)="clear()"><i class="fa fa-times"></i></button>
</div>

import { Component, OnInit } from "@angular/core";
import { SearchService } from "../services/search.service";

@Component({
  selector: "app-search",
  templateUrl: "./search.component.html",
  styleUrls: ["./search.component.scss"]
})
export class SearchComponent implements OnInit {
  constructor(private fs: SearchService) {}

  ngOnInit() {}

  onKeyup(event) {
    this.fs.updateFilter(searchInput.value);
  }

  clear() {
    this.fs.updateFilter("");
    searchInput.value = "";
  }
}

问题出在从输入标签读取值。正如您在代码中看到的那样，我只是使用id来访问数据，但是VS Code向我显示了一条警告，提示无法找到searchInput。该代码可以正常工作，但是由于收到警告，所以我认为自己做错了。

Answer 1

您班上的searchInput是什么？如果您认为这是指id="searchInput"，那么您错了。

要从您的类访问DOM元素，您应该执行此处描述的操作：document.getElementById replacement in angular4 / typescript?。

否则，在onKeyup函数中，您可以通过event.target.value访问事件中的值。

从<input />角度读取数据

1 个答案: