如果没有给出搜索参数，则返回所有结果

发布于 2025-01-10 05:14:20 字数 1453 浏览 5 评论 0原文

我正在查看 Deborah Kurata 的英雄之旅的声明式 RxJS 方法。我想知道在以下情况下它将如何工作：

默认情况下，加载所有英雄
如果有搜索词，则显示搜索结果

现在，通过执行以下操作可能可以实现：

hero-search.component.ts ：

  export class HeroSearchComponent {
  // DJK3 Assign to the declared Observable in the service
  heroes$ = this.heroService.filteredHeroes$;
  allHeroes$ = this.heroService.heroes$;

  searchActive = false;

  constructor(private heroService: HeroService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.heroService.search(term);
    this.searchActive = true;
  }
}

hero-search.component.html：

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ng-container *ngIf="!searchActive; else searchResults">
    {{allHeroes$ |async | json}}
  </ng-container>


  <ng-template #searchResults>
    <ul class="search-result">
      <li *ngFor="let hero of heroes$ | async">
        <a routerLink="/detail/{{hero.id}}">
          {{hero.name}}
        </a>
      </li>
    </ul>
  </ng-template>

</div>

但这对我来说看起来是错误的。有更好的方法吗？也许直接在服务中检查这个？

原文

I was looking at the declarative RxJS approach to tour of heroes by Deborah Kurata. I would like to know how it would work in the following case:

By default, load all heroes
If there's a search term, show the search results

Now, this would be probably possible by doing something like this:

hero-search.component.ts:

  export class HeroSearchComponent {
  // DJK3 Assign to the declared Observable in the service
  heroes$ = this.heroService.filteredHeroes$;
  allHeroes$ = this.heroService.heroes$;

  searchActive = false;

  constructor(private heroService: HeroService) {}

  // Push a search term into the observable stream.
  search(term: string): void {
    this.heroService.search(term);
    this.searchActive = true;
  }
}

hero-search.component.html:

<div id="search-component">
  <label for="search-box">Hero Search</label>
  <input #searchBox id="search-box" (input)="search(searchBox.value)" />

  <ng-container *ngIf="!searchActive; else searchResults">
    {{allHeroes$ |async | json}}
  </ng-container>


  <ng-template #searchResults>
    <ul class="search-result">
      <li *ngFor="let hero of heroes$ | async">
        <a routerLink="/detail/{{hero.id}}">
          {{hero.name}}
        </a>
      </li>
    </ul>
  </ng-template>

</div>

But this looks wrong to me. Is there a better approach? Maybe checking this directly in the service?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

彩虹直至黑白 2025-01-17 05:14:20

有多少英雄？

如果不是太多，那么我会想象 allHeroes$ 由一个服务创建，该服务在内部类似于 this.httpClient.get(methodName, options).pipe(shareReplay (1)) 然后在服务上有一个方法接受 Observable 并返回 combineLatest([this.allHeroes$, arg]).pipe(map(([heroes, searchTerm]) => !searchTerm ? of(heroes) :heroes.filter(insertFormulaHere))) (...至少在最初是这样，但这可能是然后，该组件将实例化

一个可观察对象，该可观察对象监听搜索框的更改，并将其传递给服务方法，将响应保存到组件的heroes$ 属性。