错误类型错误：在 angular

问题描述

我有一个带有模态弹出窗口的组件，并定义了一个 viewchild elementRef 来尝试在模态弹出窗口打开后获取输入文本的元素。单击按钮后打开模态，模态中有一个搜索按钮会触发打字稿中的功能，但是当单击该按钮时，我收到未定义的警告“nativeElement”。我在堆栈和其他网站上阅读了一些问题，但我没有找到解决方案，仍然遇到相同的未定义错误。

ts：

export class CheckoutAddressComponent implements OnInit {  
  @input() checkoutForm: FormGroup;
  @ViewChild('search') searchTerm: ElementRef;
}

html：

<div class="form-inline">
<input (keyup.enter)="onSearch()" class="form-control mr-2" #search style="width: 300px" placeholder="ara" type="text">
<button (click)="onSearch()" class="btn btn-outline-primary my-2">Search</button>
<button (click)="onReset()" class="btn btn-outline-success ml-2 my-2">Reset Filter</button>
</div>

ts 函数：

onSearch() {
    const params = this.accountService.getCustomerParams();
    params.search = this.searchTerm.nativeElement.value;
    params.pageNumber = 1;;
    this.getCustomers();
  }


onReset() {
    this.searchTerm.nativeElement.value = '';
    this.customerParams = new CustomerParams();
    this.getCustomers();
  }

解决方法

你为什么需要 ViewChild ？您可以使用 ngModel

<div class="form-inline">
<input (keyup.enter)="onSearch()" class="form-control mr-2" [(ngModel)]="searchTerm" style="width: 300px" placeholder="Ara" type="text">
<button (click)="onSearch()" class="btn btn-outline-primary my-2">Search</button>
<button (click)="onReset()" class="btn btn-outline-success ml-2 my-2">Reset Filter</button>
</div>

在组件中

searchTerm: string="";

onSearch() {
    const params = this.accountService.getCustomerParams();
    params.search = this.searchTerm;
    params.pageNumber = 1;;
    this.getCustomers();
  }


onReset() {
    this.searchTerm= '';
    this.customerParams = new CustomerParams();
    this.getCustomers();
  }