在使用带有 Angular 的 FromEvent RxJS 订阅输入标签值更改时如何避免使用“任何”？

Posted 2023-03-13

【中文标题】在使用带有 Angular 的 FromEvent RxJS 订阅输入标签值更改时如何避免使用“任何”？

【英文标题】：How to avoid using 'any' when using FromEvent RxJS with Angular to subscribe to input tag value changes?

【发布时间】：2022-01-21 06:19:43

【问题描述】：

在使用来自 RxJS 的 FromEvents 时，我无法定义特定类型。当我通过管道传递“keyup”事件并将其映射以获取输入值时，我只能使用(e: any => return (e.target!).value;)。即使浏览器的调试器将e 识别为KeyboardEvent，如果我定义e: KeyboardEvent，我会收到一条错误消息，指出“e 不包含属性目标”。但是，当前的代码可以工作，因为我是 RxJS + Angular 的新手，社区总是建议避免使用 any，所以我想知道在这种情况下我能做些什么来避免使用它？

Component.ts

import  TagInterface  from './../../../interfaces/tag/tag-interface';
import  Component, OnInit, Output, EventEmitter, ViewChild, ElementRef, AfterViewInit  from '@angular/core';
import  debounceTime, distinctUntilChanged, filter, map  from 'rxjs/operators';
import  fromEvent, Observable  from 'rxjs';


@Component(
  selector: 'app-tag-search-bar',
  templateUrl: './tag-search-bar.component.html',
  styleUrls: ['./tag-search-bar.component.scss']
)
export class TagSearchBarComponent implements OnInit,AfterViewInit 

  @Output() tags = new EventEmitter<TagInterface[]>();
  @ViewChild('tagInput') tagInputChild!: ElementRef;

  mappedAndFilteredInput!: Observable<any>;
  eventKeyUp! : Observable<any>;

  constructor()  

  ngOnInit(): void 
  

  ngAfterViewInit() 
    this.eventKeyUp = fromEvent(this.tagInputChild.nativeElement, 'keyup');
    this.mappedAndFilteredInput = this.eventKeyUp.pipe(
      map((e: any) => 
        return (e.target!).value;
      ),
      debounceTime(100),
      distinctUntilChanged(),
      filter(value => (value != "" && value != undefined)) 
    );

    this.mappedAndFilteredInput.subscribe(
      value => console.log(value),
      error => console.log(`error: $error`),
      () => console.log('completed maping and filtering tag input term'));
  

HTML

<div class="input-group-prepend">
    <span class="input-group-text">
        <i class="far fa-filter"></i>
    </span>
</div>
<input #tagInput type="text" class="filter-tag-list">

【参考方案1】：

这是从KeyboardEvent 获取target 的类型安全方法

    fromEvent<KeyboardEvent>(document.documentElement, 'keyup').subscribe(e => 
      const [target] = e.composedPath()
      console.log(target)      
    )

但是，在您的情况下，这样做会更简单

fromEvent(this.tagInputChild.nativeElement, 'keyup').subscribe(_ => 
  console.log(this.tagInputChild.nativeElement.value)
)

或者最好还是使用表单控件，并在表单控件上监听 valueChanges。

【讨论】：

有了您的回复，我能够在不使用any 的情况下让它工作。以后我可能会从控制转向使用，但我想学习 RxJS + Angular。因为我想保留过滤步骤，所以我最终得到了：this.eventKeyUp = fromEvent<ElementRef>(this.tagInputChild.nativeElement, 'keyup'); this.mappedAndFilteredInput = this.eventKeyUp.pipe( map((e: KeyboardEvent) => return (e.target! as HTMLInputElement).value;//(e.target!).value; ), debounceTime(100), distinctUntilChanged(), filter(value => (value != "" && value != undefined)) );