在管道中订阅 Subject 不起作用；角度4

Question

我正在努力订阅 select 下拉列表更改 Angular 4。我的 searchType 变量的更改仅在通过单击事件调用 test() 函数后可见，但我需要 Angular 立即订阅更改。

旁注：

我正在订阅过滤管道。
模块中提供了服务，因此在同一个实例上工作

App.component.html

      <select  name="searchType" id="searchType" #searchType>
        <option value="movie_title"> movie title</option>
        <option value="director">director</option>
        <option value="actor"> actor</option>
      </select>

App.component.ts

  @ViewChild('searchType') select: ElementRef;
  searchType: number;

constructor(private service: ServiceService) {}

  ngOnInit() {
    this.searchType = this.select.nativeElement.options.selectedIndex;
    this.service.sendSearchType(this.searchType);
  }

  test() {
  this.searchType = this.select.nativeElement.options.selectedIndex;
  this.service.sendSearchType(this.searchType);
  }

service.service.ts

    searchType = new Subject<number>();

 sendSearchType(id: number) {
     this.searchType.next(id);
 }

 getSearchType(): Observable<number> {
     return this.searchType.asObservable();
 }

最后 filter.pipe.ts 订阅更改

searchType: number;
private subscription: Subscription;

constructor(private service: ServiceService) {
    this.service.getSearchType().subscribe(
        (id) => (this.searchType = id)
    );
}

    transform(value: any[], filter: string): any[] {
        filter = filter ? filter.toLocaleLowerCase() : null;
        return filter ? value.filter(
                (product) =>
                    this.auxiliaryFunction(product, filter)
            ) : value;
    }

    auxiliaryFunction(product, filter) {
        if (this.searchType === 2) {
        return (product.actor.toLocaleLowerCase().indexOf(filter) !== -1)
        } else if (this.searchType === 1) {
        return (product.director.toLocaleLowerCase().indexOf(filter) !== -1)
        }  else {
        return (product.movie.toLocaleLowerCase().indexOf(filter) !== -1)
      }
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

我哪里出错了？将不胜感激任何解决方案。

Answer 1

您必须注意 select 元素的变化。我做了这个 live example，希望对您有所帮助。 (app.component.ts)

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import { AfterViewInit } from '@angular/core';

...

ngAfterViewInit() {
    const $selector = Observable.fromEvent(this.select.nativeElement, 'change');
    $selector.subscribe(() => {
        this.searchType = this.select.nativeElement.options.selectedIndex;
        this.service.sendSearchType(this.searchType);
    });
}

(filter.pipe.ts)

constructor(private service: AppService) {
    this.service.getSearchType().subscribe(
        (id) => { 
            console.log(`${id}px`);
            return (this.searchType = id);
        }
    );
}

Answer 2

您也可以使用事件绑定 (live exmaple)，但我真的更喜欢反应式方法。 (app.component.html)

<select  name="searchType" id="searchType" (change)="onSelect()" #searchType>
    <option value="movie_title">movie title</option>
    <option value="director">director</option>
    <option value="actor"> actor</option>
</select>

(app.component.ts)

onSelect() {
      this.searchType = this.select.nativeElement.options.selectedIndex;
      this.service.sendSearchType(this.searchType);
  }

在管道中订阅 Subject 不起作用；角度4

Subscription to Subject in a pipe doesn't work; Angular4

angular

observable

subscription

subject-observer