角2 | RXjs在更新视图后发出distinctUntilChanged

Question

我对RXjs有一个问题＆＃39; distinceUntil在更改JavaScript值后更改输入字段。

重现的步骤：

1. 设置文字＆＃34; a＆＃34;在输入内

2. 点击删除按钮＆gt;＆gt;因此输入为空，使用javascript

3. 再次设置＆＃34; a＆＃34;在输入内部
4. 再次单击“删除”按钮。但现在输入仍然是＆＃34; a＆＃34;值

如果我们要插入另一个与＆＃39; a＆＃39;不同的值，它就会起作用。 当然，如果我从我的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("")
}