Angular 2 |更新视图后 distinctUntilChanged 的 RXjs 问题

Question

更改 JavaScript 上的值后，RXjs 在输入字段上的 distinceUntilChanged 出现问题。

重现步骤：

在输入中设置文本"a"
单击删除按钮 >> 结果输入为空，使用 javascript
再次设置"a"里面输入
再次单击删除按钮。但现在输入保持 "a" 值

如果我们插入另一个不同于 'a' 的值，它将起作用。当然，如果我从我的 observable 中删除 distinceUntilChanged，它也会起作用。

代码片段：

@Component({
selector: 'app',
template: `
        <input #input [value]="value ? value : ''" (input)="filter$.next(input.value)">

        {{val}}
        <div>
            <button (click)=remove()>Remove</button>
        </div>
   `
   })

export class App {

  filter$ = new Subject();
  val:string;
  value:string;

  constructor() {

  }

  ngOnInit(): void {
    this.filter$
    .distinctUntilChanged()
    .subscribe((value) => {
        this.val = value;
        this.value = value;
    }));
    }

    remove(){
    console.log('test');
    this.value = "";
    this.val = "";
   }

 }

我针对我的问题创建了一个 Plunker 示例：

Answer 1

这是因为您只是在更改显示的文本。您的删除函数应如下所示：

remove() {
  this.filter$.next("")
}

Angular 2 |更新视图后 distinctUntilChanged 的 RXjs 问题

Angular 2 | RXjs issue with distinctUntilChanged after updating view

rxjs

rxjs5

angular

Angular 2 |更新视图后 distinctUntilChanged 的​​ RXjs 问题

Angular 2 | RXjs issue with distinctUntilChanged after updating view

rxjs

rxjs5

angular

Angular 2 |更新视图后 distinctUntilChanged 的 RXjs 问题