Angular2变化检测问题。如果类字段发生变化，则输入字段不会更新，但输入字段值不同

Question

我创建了一个简单的示例：plnkr。尝试在第一个字段中输入类似123qwe的内容。 ＆＃34; QWE＆＃34;不会消失。但是如果输入一个新数字，所有非数字字符都将消失。

在第二个字段中，非数字字符将替换为＆＃39;！＆＃39;它的字段按预期工作。

我的代码：

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      Doesn't work: <input [value]="val | replace:pattern:''" (input)="val=$event.target.value">
      <br>
      Works: <input [value]="val2 | replace:pattern:'!'" (input)="val2=$event.target.value">
    </div>
  `,
  directives: []
})
export class App {
  val: string = "";
  val2: string = "";
  pattern = /[^0-9]/g;
  constructor() {
  }
}

是否有任何解决方法可以让第一个字段像第二个字段一样工作但是用空字符串替换？有预期的行为吗？

Answer 1

试一试：

@Pipe({name: 'wrappedPipe'})
class WrappedPipe implements PipeTransform {
  transform(value) { return WrappedValue.wrap(value); }
}

<input [value]="val | replace:pattern:'' | wrappedPipe" (input)="val=$event.target.value">

在这种情况下，它可以正常工作，如下图所示

见plunkr https://plnkr.co/edit/p6gTqn3sMQqOuxL2bsuS?p=preview

pattern:''无法正常工作，因为它始终返回相同的结果

1234qwe    => 1234
1234qwerty => 1234
1234qwerty1 => 12341 // changes