Оператор трубы не работает при объединении с асинхронным каналом в шаблоне для наблюдаемых изменений значений

Question

Я пытаюсь собрать пользовательские входы и выполнить некоторую бизнес-логику в зависимости от входных данных и привязать полученные данные обратно к элементу формы. Я подключаюсь к наблюдаемым изменениям значений форм, выполняю свою собственную логику и привязываю результат к шаблону.

Я пытаюсь избежать подписки на компонент и сделать это из шаблона, используя асинхронный канал, как показано ниже. Но если я не подписываюсь на компонент, логика не срабатывает.

Насколько я понимаю, поскольку асинхронный канал будет подписываться на наблюдаемое, из компонента логика работы канала должна работать нормально, но она не вызывается, если я не выполню другую подписку, как показано ниже, может ли кто-нибудь помочь мне, почему он не вызывает Логика оператора канала, поскольку я уже подписан с использованием асинхронного канала в шаблоне, пожалуйста? Спасибо.

Я попытался переместить логику в ловушку ngAfterViewChecked, которая все еще не работает, если я подписываюсь на компонент, он работает, но я хочу избежать многократной подписки.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Observable } from 'rxjs';
import { tap, startWith } from 'rxjs/operators';

@Component({
    selector: 'app-check-value-changes',
    templateUrl: './check-value-changes.component.html',
    styleUrls: ['./check-value-changes.component.scss']
})
export class CheckValueChangesComponent implements AfterViewInit {
    @ViewChild('form') form: NgForm;
    valueChanges$: Observable<any>;

    ngAfterViewInit() {
        this.valueChanges$ = this.form.valueChanges;
        // Not Working
        this.valueChanges$.pipe(
            tap((c) => console.log(`Async pipe Subscribe ? - ${JSON.stringify(c)}`))
            // other business logic here
        );

        // Working fine
        this.valueChanges$.pipe(
            tap((c) => console.log(`Explicit Subscribe - ${JSON.stringify(c)}`))
            // other business logic here
        ).subscribe();
    }
}

<span *ngIf="valueChanges$ | async as value">
    {{ value | json }}
</span>
<form #form="ngForm">
    <input type="text" name="txtName" ngModel>
</form>

Answer 1

Оказывается простым исправлением, когда я объединил наблюдаемые операторы инициализации и операции конвейера в одной строке, все работает нормально.

В моем исходном коде, даже если я выполнял операцию канала в valueChanges $Наблюдаемый Я не мутировал исходную наблюдаемую и в итоге создал другую наблюдаемую, которая, конечно, нуждается в другой подписке для выдачи значений.

Фиксированный код компонента:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Observable, Subject } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
    selector: 'app-check-value-changes',
    templateUrl: './check-value-changes.component.html',
    styleUrls: ['./check-value-changes.component.scss']
})
export class CheckValueChangesComponent implements AfterViewInit {
    @ViewChild('form') form: NgForm;
    valueChanges$: Observable<any>;

    ngAfterViewInit() {
        this.valueChanges$ = this.form.valueChanges.pipe(
            tap((c) => console.log(`Async pipe Subscribe ? - ${JSON.stringify(c)}`))
        );
    }
}