在文本区域 Angular 5 中键入时显示字符计数

Question

我正在尝试编写一个代码来显示文本区域字段下方的字符计数。我找到了很多解决方案，但我不知道为什么它对我不起作用。

这是我正在尝试的代码：

<div class="form-group border-0 describe mb-0">
<label for="describewishInput" i18n="@@describewishLabel" class="text-capitalize">Describe Your Wish:</label>
<span ngbTooltip="Please describe your wish here"
placement="top" class="tt tt-bottom mt-1 mr-0"></span>
<textarea type="text" (ngModel)="yourWish" id="yourWish" class="form-control mb-1" maxlength="255" i18n-placeholder="@@describeyourwish"></textarea>
<span class="pull-right char"><em>{{ 255 - yourWish.length }} characters left</em></span>
</div>

这是我得到的错误

SignupFormComponent.html:121 ERROR TypeError: Cannot read property 'length' of undefined
at Object.eval [as updateRenderer] (SignupFormComponent.html:122)
at Object.debugUpdateRenderer [as updateRenderer] (core.js:14735)
at checkAndUpdateView (core.js:13849)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)
at execEmbeddedViewsAction (core.js:14153)
at checkAndUpdateView (core.js:13845)
at callViewAction (core.js:14195)

你能帮我这个吗？这非常令人沮丧，因为我从 1 天开始工作。

提前谢谢。

Answer 1

需要使用双向数据绑定[(ngModel)]，

<textarea type="text" [(ngModel)]="yourWish" id="yourWish" class="form-control mb-1" maxlength="255" i18n-placeholder="@@describeyourwish"></textarea>

STACKBLITZ DEMO