Question

我正在尝试根据用户传递的字符串搜索产品

getItems(): void {
  let search = event.target.value;
  if (search && search.trim() != '') {
    this.productService.getProducts(search).subscribe((products) => {
      console.dir(products);
    }, (err) => {
       console.log(err);
    });
  }

当我尝试通过查询进行搜索时，它显示在错误下方

错误TypeError：无法读取未定义的属性“目标”

我无法弄清楚哪里出了问题。谁能帮我

Answer 1

假设有一个事件...应将其传递给函数

getItems(event)

此外。在使用属性之前检查属性是一个好习惯。我的意思是事件对象的目标属性

事件绑定的分配方式可能有所不同。但是，在您的情况下-可能是输入字段的KeyUp或按钮上的Click事件（但是您需要引用该字段）

<input (keyup)="getItems($event)" />

or 

<input #my-input />
<button (click)="getItems($event)" />

在第二个示例中，您不需要$ event-因为它不会引用该值。但是您需要使用ViewChild装饰器函数从输入中获取值

Answer 2

这是大多数人仅使用两种方式进行数据绑定的一种可能方法，它用于获取数据和绑定数据。

第一种方式：-

HTML文件

<input [(ngModel)]="searchTxt" name="searchTxt" (keyup)="getItems()" />

打字稿文件

public searchTxt:any;

constructor(){
   //this.searchTxt="some value"; //here you can assign value to search box
}

getItems(): void {
  let search = this.searchTxt; // here iam accessing value from textbox.
  if (search && search.trim() != '') {
    this.productService.getProducts(search).subscribe((products) => {
      console.dir(products);
    }, (err) => {
       console.log(err);
    });
  }

第二种方式：- 从您的代码中您遗漏了一些小部分，在这里您将看到。

HTML文件

<input (keyup)="getItems($event)" />

打字稿文件

getItems(): void { //here you misssed to recieve an argument to a function calling statement

所以要这样改变

getItems(event): void { //here iam recieving argument used some variable name
  let search = event.target.value;
  if (search && search.trim() != '') {
    this.productService.getProducts(search).subscribe((products) => {
      console.dir(products);
    }, (err) => {
       console.log(err);
    });
  }

我希望您了解您错过了一些代码行，以及如何使用双向数据绑定。

使用双向绑定[(ngModel)]时，您必须在FormsModule文件中包含app.module.ts，

无法读取ionic3中未定义的属性“目标”

2 个答案: