时间戳

首页 > 解决方案 > Angular 10 RxJs 比较可观察与不可观察

angular - Angular 10 RxJs 比较可观察与不可观察

问题描述

如何比较用户 inputKind 选择的 type Kind。有了randomKind$这个类型：Observable<Kind>？

html:

<div class="container-fluid">
    <div class="row justify-content-center">
        <ng-container *ngIf="((kindViewModel$ | async)?.kinds) as kinds">
            <div>
                <div>
                    <h1>{{(randomKind$ | async).originalText}}</h1>
                </div>
                <div *ngFor="let kind of kinds">
                    <h3>
                        <button mat-button (click)="kindSelected(kind)">{{kind.translatedText}}</button>
                    </h3>
                </div>
            </div>
        </ng-container>
    </div>
</div>

打字稿：

  public randomKind$: Observable<Kind> = this.kindsService.kindViewModel$
    .pipe(map(t => t.kinds[this.randomInt(0, 7)]));

  public kindSelected(inputKind: Kind) {
      //how to compare inputKind with randomKind?
  }

 export interface Kind {
    originalQuestions: string;
    originalText: string;
    translatedQuestions: string;
    translatedText: string;
  }

标签： angular

解决方案

订阅randomKind$并聆听价值观。将最新值存储在另一个属性中。让我们命名theVal

this.randomKind$.subscribe((x) => { this.theVal = x });

与新的theVal.

另一种可能是BehaviorSubject。由于它有一个getValue方法，您可以随时读取最新值。

推荐阅读