Angular：试图将我的功能变成RXJS

Question

我的功能已实现并正常工作 我想在RXJS目录中使用过滤器将其rxjs置于rxjs目录中，并包含

并使用subscribe更新

  posts: Post[] = [];
   validPosts: Post[] = [];
   authorName: string = "";

这是我的功能：

SearchPostsByName($event: Event) {
    const searchKey = ($event.target as HTMLInputElement).value;

    if (searchKey === '') {
      this.validPosts = this.posts;
      return;
    }
    
    this.validPosts = this.posts.filter(
      value => value.authorName.includes(this.searchName)
    );
  }

Answer 1

要使用输入字段构建搜索，请将输入元素绑定到 @viewchild 。

<label>Search Posts </label>
<div>
  <input #search type="text" [value]="filterInput" />
</div>

export class AppComponent implements OnInit, AfterViewInit, OnDestroy {

  @ViewChild('search', { static: true }) search: ElementRef;

  private subscription: Subscription;

  public posts$: Observable<Post[]>;
  public filterInput: string = '';
  public errorMessage: string = '';

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private appService: AppService
  ) {}

  ...

}

在 AfterViewInit 中，您可以在元素的键事件中添加一个可观察到的。通过管道，您地图事件到其值。您添加了 debouncetime ，因此可观察到的发射不会太频繁，并且只能收听更改trough 独特的nuntilChanged 。

在订阅本身中，您可以根据输入来检查输入值并更改URL queryparams 。

ngAfterViewInit() {
  this.subscription = fromEvent(this.search.nativeElement, 'keyup')
    .pipe(
      map((event: KeyboardEvent) => (event.target as HTMLInputElement).value),
      debounceTime(500),
      distinctUntilChanged()
    )
    .subscribe((filter) => {
      const queryParams = filter ? { queryParams: { filter } } : undefined;
      this.router.navigate(['.'], {
        relativeTo: this.route,
        ...queryParams,
      });
    });
}

在 oninit 中，您 switchmap 可观察到的 queryparams 到一个新观察的可观察到，该可观察到，该可观察到，该可观察到，通过服务从数据库中获取过滤后的帖子。在窗口上，刷新URL的过滤器查询也将设置为输入值。

private fetchPosts() {
  this.posts$ = this.route.queryParams
    .pipe(
      switchMap((params) => {
        if (params.filter) this.filterInput = params.filter;
        return this.appService.fetchPosts(params.filter);
      })
    )
    .pipe(
      catchError((err) => {
        this.errorMessage = err;
        return EMPTY;
      })
    );
}

ngOnInit() {
  this.fetchPosts();
}

为了显示内容，您可以通过HTML中的 async 管道订阅可观察到的。

<div *ngIf="posts$ | async as posts; else loadingOrError">
  <div *ngIf="!posts.length">
    <h3>No posts found</h3>
  </div>
  <div *ngFor="let post of posts">
    <b>{{ post?.content }}</b>
    <br/>
    <i>
      by <b>{{ post?.authorName }}</b> at
      <b>{{ post?.date | date: 'dd MMMM YYYY' }}</b>
    </i>
    <hr />
  </div>
</div>

<ng-template #loadingOrError>
  <span *ngIf="errorMessage; else loading">
    An error occured while loading the posts: {{ errorMessage }}
  </span>
  <ng-template #loading> ...loading... </ng-template>
</ng-template>

State Management，使用RXJS | url vs本地客户端状态