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

【问题标题】：Cannot read property 'target' of undefined in ionic3无法读取 ionic3 中未定义的属性“目标”
【发布时间】：2018-07-23 14:47:27
【问题描述】：

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

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

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

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

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

【问题讨论】：

你试过我的答案了吗？您的代码错误，您可以只更改这一行 getItems(event){}

标签： typescript ionic3

【解决方案1】：

假设有一个事件......它应该被传递到函数中

getItems(event)

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

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

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

or 

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

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

【讨论】：

【解决方案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)] 时，您必须在app.module.ts 文件中包含FormsModule，

【讨论】：