时间戳

首页 > 解决方案 > 如何使管道始终工作，而不是检查更改？

angular - 如何使管道始终工作，而不是检查更改？

问题描述

我有一个管道可以找到所有表情符号名称并将它们替换为图标。但问题是管道不会更改添加的最后一个字符，直到我输入任何内容。例如 (:heart_eyes:) last :heart_eyes: 在我输入任何内容之前不会改变。如何让管道一直工作，而不是等待一些变化？

HTML：

<textarea matInput #newMessage color="primary" 
mwlTextInputElement
[formControl]="newMessageFormControl"
[value]="newMessageFormControl.value | q9Emoji"
></textarea>`


TS:
transform(value: any): any {
return this.replace(value);
}

replace(value) {
const emojisRegex = new RegExp(':(' + 
Object.keys(this.emojiObj).join('|') + '):', 'g');

return value.replace(emojisRegex, (match, text) => this.emojiService.unifiedToNative(this.emojiObj[text]));
}

标签： angularpipe

解决方案

使用双向绑定代替 [formControl]，这会在每个字符更改时返回一个值，您也可以使用 (keyup)="newMessage"。

[(ngModel)]="newMessage"

推荐阅读