Angular2更改檢測問題。輸入字段不更新，如果類字段does'n更改，但輸入字段值不同

Question

我創建一個簡單的示例：plnkr。嘗試在第一個字段中輸入123qwe之類的內容。 「qwe」不會消失。但是如果輸入一個新數字，所有非數字字符將會消失。

在第二個字段中，非數字字符替換爲'！'並且該領域按預期工作。

我的代碼：

@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