实战 搜索框

为网站添加一个商品搜索功能。(和上节响应式编程不同的是,订阅后返回的数‘’保存到本地‘’与“调本地方法“。)

第一步:页面添加输入框,用响应式编程处理输入框事件。输入关键字保存在组件的属性上。

第二步: 写一个管道。根据用户输入的关键字过滤商品列表。


1.写模板

2.想用响应式编程,主模块improts引入  ReactiveFormsModule

实战 搜索框_第1张图片

3.控制器写,


实战 搜索框_第2张图片


4.ng g pipe/filter


实战 搜索框_第3张图片

5.

实战 搜索框_第4张图片

你可能感兴趣的:(实战 搜索框)