代码之家 › 专栏 › 技术社区 › Grimace of Despair

如何处理可观察的可选参数?

angular2-observables angular

0

Grimace of Despair · 技术社区 · 8 年前

service.getItems filter

是否建议修改下面的代码以实际工作?

@Component({}
  selector: 'my-component',
  template: `
    <!-- Items are shown async -->
    {{ items | async }}
  `
})
export class MyComponent {

  //////////////////////////////////////////////////////////////////
  // Initialize the filter observable with a null value
  //////////////////////////////////////////////////////////////////
  constructor(private service) {
    this.filter = null;
  }

  //////////////////////////////////////////////////////////////////
  // Filter observable to hookup the filter value to the service
  //////////////////////////////////////////////////////////////////
  filter$: Subject<Filter> = new Subject<Filter>();

  //////////////////////////////////////////////////////////////////
  // Service call to fetch items
  //////////////////////////////////////////////////////////////////
  items$: Observable<any[]> = this.filters$.pipe(
    switchMap(filter => this.service.getItems(filter));
  );

  //////////////////////////////////////////////////////////////////
  // Allow filter with
  // <my-component [filter]="myFilter">
  //////////////////////////////////////////////////////////////////
  @Input()
  set filter(filter: Filter) {
    this.filter$.next(filter);
  }
}

2 回复 | 直到 8 年前

1

2

Chau Tran 8 年前

问题是因为你在使用 Subject BehaviorSubject filter$ items$ Observable this.filter$

@Component({
  selector: 'my-component',
  template: `
       <!-- Items are shown async -->
       {{ items$ | async }}
  `
})
export class MyComponent {

 //////////////////////////////////////////////////////////////////
 // Initialize the filter observable with a null value
 //////////////////////////////////////////////////////////////////
 constructor(private service) {
 }

 //////////////////////////////////////////////////////////////////
 // Filter observable to hookup the filter value to the service
 //////////////////////////////////////////////////////////////////
 filter$: BehaviorSubject<Filter> = new BehaviorSubject<Filter>(null);

 //////////////////////////////////////////////////////////////////
 // Service call to fetch items
 //////////////////////////////////////////////////////////////////
 items$: Observable<any[]> = this.filters$.pipe(
   switchMap(filter => this.service.getItems(filter));
 );

 //////////////////////////////////////////////////////////////////
 // Allow filter with
 // <my-component [filter]="myFilter">
 //////////////////////////////////////////////////////////////////
 @Input()
 set filter(filter: Filter) {
   this.filter$.next(filter);
 }
}

这里有一个Stackblitz,你可以玩: https://stackblitz.com/edit/angular-ce8jrw

主题 this.filter$.next(null) constructor .

2

0

Anthony DiTomasso 8 年前

this.filters$.subscribe( res => {
  res.pipe(
    switchMap(filter => this.service.getItems(filter)
  )
})

this.service.getItems(filter)

祝你好运!