Angular RxJS: событие сгенерировано дважды

Я закодировал две наблюдаемые:

Один для захвата событий отправки формы:

<form role = "form" (ngSubmit) = "search()">
   ...
</form>

И search() достигается и излучает:

private search(): void {
    this.searchClickSubject.next();
}

В конструкторе компонентов:

private searchClickSubject:Subject<void>;
private searchClick$:Observable<any>;

constructor() {
    this.searchClickSubject = new Subject<void>();
    this.searchClick$ = this.searchClickSubject.asObservable();
}

Как видите, я создаю Observable из темы searchClickSubject, используя метод searchClickSubject.asObservable для searchClick$.

С этого момента я использую этот searchClick$ Observable, чтобы ловить submit form.

После этого я создаю еще один Observable:

    this.searchQuery$ = this.searchClick$.pipe(
        map(() => <Query>{
            offset: 0,
            limit: 10
        })
    );

Итак, каждый раз, когда выдается Query, я делаю запрос с использованием пользовательских функций конвейера:

    this.metrics$ = this.searchQuery$
        .pipe(
          pageLoading(),
          makeRequest(),
          loadedPage()
        );

Это мой ngOnInit():

public ngOnInit() {            
    // Grab search button click event
    this.searchQuery$ = this.searchClick$.pipe(
        map(() => <Query>{
            offset: 0,
            limit: 10
        })
    );

    this.metrics$ = this.searchQuery$
        .pipe(
          //...
        );
}

Однако запрос запускается дважды.

Я создаю подписки с помощью конвейера async:

<div class = "row" *ngIf = "!(metrics$ | async)" style = "margin: 1.54em;">

<div *ngIf = "metrics$ | async; let metric;"...

Есть идеи?