如何使用异步管道而不是使用订阅？

Question

我想使用异步管道“|异步”而不是订阅。这是我的订阅代码目前的样子：

ngOnInit(): void {

  this.activatedRoute.url

    .pipe(takeUntil(this.unsubscribe$))

      .subscribe(segments => {

        this.quizName = segments[1].toString();

      });

}

在我的模板中，我有：<mat-card *ngIf="quiz.quizId === quizName">

Answer 1

让我们试试这个：quizName$: Observable<any>;ngOnInit(): void {&nbsp; this.quizName$ = this.activatedRoute.url&nbsp; &nbsp; .pipe(&nbsp; &nbsp; &nbsp; takeUntil(this.unsubscribe$),&nbsp; &nbsp; &nbsp; map(segments => segments[1].toString()); // Not sure about this part&nbsp; &nbsp; );}<mat-card *ngIf="(quizName$ | async) === quiz.quizId">请注意，每次您在模板中使用异步管道时，它都会进行订阅。

Answer 2

添加变量：quizName$ = this.activatedRoute.url.pipe(map(segments => segments[1].toString()));不需要takeUntil诸如“| async”之类的就可以了可选（您的 IDE 会自己知道）quizName$: Observable<string> ...在 HTML 中：*ngIf="(quizName$ | async) === quiz.quizId"更“稳健”的解决方案showQuiz$: Observable<boolean> = this.activatedRoute.url.pipe(&nbsp; map(segments => segments[1].toString()),&nbsp; map(quizName => quizName === this.quiz && this.quiz.id));*ngIf="showQuiz$ | async"