1

与角度和可观察量作斗争。

我有一个像这样的可观察的：

 private searchResults: Observable<any[]>;

我用这样的称呼来填充它：

this.searchResults = this.searchTerms.pipe(
        map((event: any) => event.target.value),
        debounceTime(300),
        distinctUntilChanged(),
        filter((term: string) => term && term.length >= 3),
        flatMap((term: string) => this.http.get<any[]>(`https://my-cool-rest.api/${term}`))
    )

（注意：searchTerms 是Subject<string>()并且是在 html 上实现的，例如<input type="text" (keyup)="searchTerms.next($event)"/>：）

到目前为止一切正常，一切都按预期工作。

当我收到结果时，我会用一个简单的 UL 来展示它们

<ul>
     <li *ngFor="let result of searchResults | async">
          <a (click)="selectItem(result.id)>{{ result.name }}</a>
     </li>
</ul>

单击一个项目将调用selectItem在控制台上写入结果的函数并清除searchResults：

selectItem(result: string) {
    if (result) {
        console.log(result);
        this.searchResults = Observable.of([]);
    }
}

再次，一切正常。

但是，如果我重复该过程以搜索其他关键字，*ngFor则不再显示结果。

为了完全安全，我订阅searchResults（例如：在构造函数中）来记录它

constructor() {
     this.searchResults.subscribe(data => console.log(data));
}

你猜怎么着？奇迹般有效

我想这是我不明白的角度（5+）行为。

提前致谢！

4

1 回答 1

1

正如未定义的用户指出的那样，您正在使用以下行覆盖流：

this.searchResults = Observable.of([]);

所以如果你想重置数组，你有两个选择：
- 将“搜索”输入设置为空字符串，但我会触发另一个请求
- 利用可观察对象和流组合

我认为第二个是一个更好的主意，这里是如何实现它：

import { merge } from 'rxjs/observable/merge';
import { mapTo } from 'rxjs/operators';

private searchResults: Observable<any[]>;
private resetResults$ = new Subject();

this.searchResults = merge(
  // every time the reset stream receive a new value,
  // merge it into the searchResults and no matter what 
  // the value is merge an empty array
  resetResults$.pipe(mapTo([])),

  this.searchTerms.pipe(
    map((event: any) => event.target.value),
    debounceTime(300),
    distinctUntilChanged(),
    filter((term: string) => term && term.length >= 3),
    flatMap((term: string) => this.http.get<any[]>(`https://my-cool-rest.api/${term}`))
  )
)

selectItem(result: string) {
  if (result) {
    // send a new value to the reset stream
    this.resetResults$.next();
  }
}
于 2018-01-11T13:46:43.950 回答