Nie możesz używać operatorów wyrażeń szablonowych (potok, nawigator zapisywania) w instrukcji szablonu:
(ngModelChange)="Template statements"
(ngModelChange) = "item.value | useMyPipeToFormatThatValue = $ event"
https://angular.io/guide/template-syntax#template-statements
Podobnie jak wyrażenia szablonowe, instrukcje szablonowe używają języka, który wygląda jak JavaScript. Parser instrukcji template różni się od parsera wyrażeń szablonu i obsługuje w szczególności zarówno podstawowe przypisanie (=), jak i wyrażenia łańcuchowe (z; lub,).
Jednak niektóre składnie JavaScript są niedozwolone :
- Nowy
- operatory inkrementacji i dekrementacji, ++ i -
- przypisanie operatora, na przykład + = i - =
- operatory bitowe | i &
- operatory wyrażeń szablonu
Więc powinieneś napisać to w następujący sposób:
<input [ngModel]="item.value | useMyPipeToFormatThatValue"
(ngModelChange)="item.value=$event" name="inputField" type="text" />
Przykład Plunkera
item.value
jest to liczba i używasz jejDatePipe
do konwersji na ciąg daty. Kiedy data jest edytowana,$event
będzie również ciągiem daty i nie będzie pasować z powrotem.item.value
Musisz odwrócić to, co zrobił potok w twoim(ngModelChange)
wyrażeniu - tj. Zamienić łańcuch daty z powrotem na liczbę.(ngModelChange)="updateItemValue($event)"
, a następnie stwórzupdateItemValue(date: string)
metodę i wewnątrz niejitem.value = someConversionFunction(date);
Teraz, jeśli pytasz, czego użyć jako funkcji konwersji, nie wiem. MożeDate.parse()
może zadziałać.Rozwiązaniem jest tutaj podzielenie powiązania na powiązanie jednokierunkowe i powiązanie zdarzenia - które w
[(ngModel)]
rzeczywistości obejmuje składnia .[]
jest składnią powiązań jednokierunkowych i składnią powiązań()
zdarzeń. Gdy używane razem -[()]
Angular rozpoznaje to jako skrót i łączy dwukierunkowe powiązanie w postaci powiązania jednokierunkowego i powiązania zdarzenia z wartością obiektu składnika.Powodem, dla którego nie można używać
[()]
z potokiem, jest to, że rury działają tylko z wiązaniami jednokierunkowymi. Dlatego należy oddzielić potok, aby działał tylko na jednokierunkowym powiązaniu i oddzielnie obsługiwał zdarzenie.Aby uzyskać więcej informacji, zobacz Składnia szablonów kątowych .
źródło
Chciałbym dodać jeszcze jeden punkt do zaakceptowanej odpowiedzi.
Jeśli typ kontrolki wprowadzania danych nie jest tekstem, potok nie będzie działał.
Pamiętaj o tym i oszczędzaj czas.
źródło
Wypróbowałem powyższe rozwiązania, ale wartości, które trafiają do modelu, były wartościami sformatowanymi, a następnie zwracały i wyświetlały mi błędy currencyPipe. Więc musiałem
A na funkcji addToAmount -> zmiana przy rozmyciu, ponieważ ngModelChange dawał mi problemy z kursorem.
I usunięcie innych wartości nienumerycznych.
źródło
Moje rozwiązanie jest podane poniżej tutaj searchDetail jest obiektem ..
źródło
musisz użyć [ngModel] zamiast dwukierunkowego wiązania modelu z [(ngModel)]. następnie użyj zdarzenia zmiany ręcznej z (ngModelChange). jest to zasada publiczna dla wszystkich dwukierunkowych danych wejściowych w komponentach.
ponieważ potok na emiterze zdarzeń jest nieprawidłowy.
źródło
Ze względu na dwukierunkowe wiązanie, aby zapobiec błędom:
możesz wywołać funkcję, aby zmienić model w następujący sposób:
będzie dobrze, jeśli istnieje lepsze rozwiązanie, aby zapobiec temu błędowi.
źródło