typescript 检测输入Angular 变化

tkqqtvp1 于 2022-12-05 发布在 TypeScript

关注(0)|答案(2)|浏览(210)

我有一个搜索输入，我只想在用户触摸或输入输入字段时触发this.searchProperties.emit，我不想在视图初始化后触发它。我只想在用户触摸或输入字段时发出。
目前的问题是它在视图初始化后调用发射。感谢您的任何想法或帮助。

html代码

<mat-form-field id="property-list-filter" appearance="fill">
      <mat-label style="font-size:12px">Filter properties</mat-label>
      <input matInput #searchInput placeholder="Ex. Property ID" #input>
</mat-form-field>

ts代码片段

@ViewChild('searchInput') searchInput: ElementRef;
ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator

    fromEvent<any>(this.searchInput.nativeElement, 'keyup')
      .pipe(
        map((event) => event.target.value),
        startWith(''),
        debounceTime(500),
        distinctUntilChanged(),
        switchMap(async (search) => {
          this.searchProperties.emit(this.searchInput.nativeElement.value.trim().toLowerCase())
        })
      )
      .subscribe({ complete: noop });
}

typescript

来源：https://stackoverflow.com/questions/74612135/detect-input-changes-in-angular

2条答案

按热度按时间

62lalag41#

我建议你，使用ngModel和ngModelChange

<mat-form-field id="property-list-filter" appearance="fill">
  <mat-label style="font-size:12px">Filter properties</mat-label>
  <input matInput [(ngModel)]="input variable" (ngModelChange)="changeHandlerFunction()" placeholder="Ex. Property ID" #input>
</mat-form-field>

check this link

赞(0）回复(0）举报 2022-12-05

xpcnnkqh2#

首先，从管道中删除startWith，它在第一次初始化时触发一个emit。
为了跟踪input事件，您必须使用Angular event binding侦听它，如下所示：