时间戳

首页 > 解决方案 > 角度读取数据

angular - 角度读取数据

问题描述

我正在使用 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 的警告。代码工作正常，但由于我收到警告，我认为我做错了什么。

标签： angular

解决方案

你searchInput的课上有什么？如果你认为它指的是id="searchInput"你错了。

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

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

推荐阅读