0

我正在努力订阅 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>

应用组件.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.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();
    }

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

4

2 回答 2

0

您也可以使用事件绑定（实时示例），但我真的更喜欢反应式方法。( 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);
  }
于 2018-02-17T18:57:25.303 回答
0

您必须注意选择元素的变化。我做了这个活生生的例子，我希望它有所帮助。( 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);
    });
}

（过滤器.pipe.ts）

constructor(private service: AppService) {
    this.service.getSearchType().subscribe(
        (id) => { 
            console.log(`${id}px`);
            return (this.searchType = id);
        }
    );
}
于 2018-02-17T05:46:29.453 回答