Angular 表单控件值更改不通知

Question

我有一个订阅了 valueChanges 可观察对象的基本表单控件。

@Component({
  selector: 'my-app',
  template: `
       <input [formControl]="control" />
       <div>{{ name$ | async | json }}</div>
   `
})
export class AppComponent implements OnInit {
  name$: Observable<string>;
  control;

  constructor(private builder: FormBuilder) {
    this.control = this.builder.control('');
  }

  ngOnInit() {
    this.name$ = this.control.valueChanges
      .pipe(
        map((name) => {
          console.log('fired', name)
          return name;
        })
      );


    this.control.setValue('2');
  }
}

当我调用 setValue 时，观察者没有收到任何通知。似乎异步管道不起作用。如果我将 setValue 包装在 setTimeout 中，它就可以工作。为什么会这样？

我还尝试添加 shareReplay() ，但它也不起作用。

Answer 1

这个问题的解决方案

this.control.setValue('2'); // I move any changes at the top for startWith operater 
this.name$ = this.control.valueChanges
  .pipe(
    startWith(this.control.value),
    map((name) => {
      console.log('fired', name)
      return name;
    })
  );

另一种在没有 async 运算符的情况下使其工作的方法这意味着我已经在控件值更改为“2”之前订阅了值更改，并且我稍后捕获了所有更改

this.control.valueChanges
  .pipe(
    map((name) => {
      console.log('fired', name)
      return name;
    })
  )
  .subscribe ( v => this.value = v )

模板

{{value}}

为什么问题中带有异步的示例不起作用，异步运算符将订阅可观察对象，但在异步订阅时，控件的当前值将为“2”，因此第一个值的原因没有变化不作为表单控件的更改发出，另一个可观察的东西是惰性的，所以当您订阅时，您将获得值，之前的任何更改都不会被看到