与模板中的异步管道相结合以进行值更改时，管道运算符不起作用

Question

我试图捕获用户输入并根据输入执行一些业务逻辑，并将结果数据绑定回form元素。我加入了可观察到的表单valuechanges并执行我的自定义逻辑并将结果绑定到模板。

我试图避免从组件中订阅，而是使用异步管道从模板中进行订阅，如下所示。但是，如果我不订阅该组件，则逻辑不会触发。

根据我的理解，由于异步管道将订阅可观察的对象，因此从组件中，管道操作逻辑应该可以正常工作，但除非进行如下所示的另一次订阅，否则该管道操作逻辑不会被调用，有人可以帮助我为什么它不触发管道运算符逻辑，因为我已经在模板中使用异步管道进行了订阅，请？谢谢。

我尝试将逻辑移至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 $ observable中进行了管道操作，我也没有更改原始的observable并最终创建了另一个Observable，这当然需要另一个订阅才能发出值。

固定的组件代码：

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)}`))
        );
    }
}