用户登录

中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

在元素上可以绑定一些事件,在这个 Post 组件里面先添加一个事件的处理方法,名字可以叫 removeItem,在这个方法里先简单的控制台上输出一行文字,remove。

打开这个组件的模板文件,在这个 li 元素里再添加一个 button 元素,按钮文字是 remove。在这个按钮元素上绑定一个 click 事件,绑定事件用的写法是一组括号,里面是绑定的事件的名字,比如 click 事件,就是点击事件。它的值是事件的处理方法,就是在这个元素引发生点击事件以后要做的事情。

用一下刚才我们在组件里添加的 removeItem()。回到浏览器,按一下列表项目右边的 remote 按钮,触发了点击事件,会执行组件里的 removeItem 方法,这个方法做的事情就是在控制台上输出一个 remove。

改进事件处理方法

下面我希望在点击了 remove 按钮之后,可以真正的删除掉当前项目。回到组件模板,在这个 ngFor 指令里面,先用分号分隔一下,然后输入 index as i ,这个 index 是当前项目的索引号,这里我们把它命名成了小 i 。

把这个索引值交给 removeItem 方法。 回到组件,找到 removeItem 方法,让它接收一个 item 参数,类型是 number,这个 item 的值可以是内容列表项目的索引号。

方法里面重新设置一下组件的 entities 属性的值,它的值是 this.entities 用一下数组上的 filter 方法,给它一个方法,方法有一个 entity 参数,表示当前项目,还有一个 index,它是当前项目在数组里的索引号。

方法 return 的是 index !== item 的项目。

回到浏览器再试一下,按一下列表项目的 remove 按钮,现在可以在列表里移除掉对应的内容项目。

事件绑定(Event binding)《 Angular:起步 》

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点