Day 27：开始来学资料系结：使用目前所学，来个简单实作吧！（一）

资料系结的主题讲了好几天，那麽，就来小试身手一下，透过一个简单的实作，把这几天所学到的观念，试着运用看看。

看看上图框起来的 input，我们实作的需求如下：

1. 当使用者在关键字搜寻这个 input 输入文字时，要在输入框的正下方显示正在输入的字元数。

2. 当使用者在输入框按下 esc 键时，会清空输入框的内容。

如果，你也是跟着我从零开始学习 Angular，不妨先给自己十分钟来思考，如果是你，会怎麽着手呢？

以下，就是我拆解这个实作的思考流程：

首先，我们先做计算字元数的部分，我会先到 AppComponent 新增一个 property，就把它命名为 textLength，然後给它一个值为 0。

接着到 HTML 用文件插值把这个 property 绑定。

然後查看一下网页画面。

确实已经把 textLength 这个 property 绑定，并呈现到网页上了。

接着，我们要新增一个事件，当我们在 input 中按下键盘，输入文字时，会触发一个方法，这个方法则会帮我们将目前的字数计算出来，并且修改 textLength 的值，所以，我们一样在 HTML 的 input 标签上，加上这段程序码：

(keyup) ="textCounter($event)"

然後到 AppComponent，加入刚才我们已预先命名好的方法 textCounter。

由於我们是输入键盘(keyup)的事件，所以这里 $event 的型别会是 KeyboardEvent。

我们在 Day 25：开始来学资料系结：事件系结（二）使用 $event 参数 时有提到，$event.target 代表的就是我们目前指向的这个 DOM 物件，在这里就是指 input 这个 DOM，而要取得 input 这个 DOM 的值，通常会使用 $event.target.value，所以我们就来试试看，并试着把结果印出来。

竟然出错了！我在学习的过程中，观看 Will 保哥 的 Angular 开发实战：从零开始 课程，当时的版本还能使用这个写法，但是现在我们用来开发的 Angular 版本已经是 Angular 12 了，因此目前的版本，这个写法看来是行不通。

所以，我就试着把 Property 'value' does not exist on type 'EventTarget' 这段内容，直接丢到 Google 去找解法。

果然出现了几笔结果，这里，我们就先参考第二笔的繁中资源：[Angular] 解决 Property ‘value’ does not exist on type ‘EventTarget’，来改写目前的程序码。

[Angular] 解决 Property ‘value’ does not exist on type ‘EventTarget’ 中提供了三个方法，我们采用了第二个方法，这里提到了 TypeScript 中的型别断言，想要了解更多型别断言的资讯，可以参考一下由 Will 保哥 转译成繁体中文的网站：TypeScript 新手指南：型别断言。

此时，我们到网页验证一下，确实可以看到，可以顺利的印出 input 这个 DOM 的 value 了。

接着，我们再来改写一下程序码，就可以抓取 value 的长度。

由於我们在 HTML 有使用文字插值绑定 textLength 这个 property，透过按下键盘，触发 textCounter 方法，来改写 textLength 的值，因此，网页上就正确显示出目前输入的字元数了！

以上，我们完成了需求一，下一篇，我们再来实作需求二！

参考来源：

• [Angular] 解决 Property ‘value’ does not exist on type ‘EventTarget’

• stackoverflow：Property 'value' does not exist on type 'EventTarget'

• TypeScript 新手指南：型别断言