今天完成的事

1，完善了搜索组件的数据过滤逻辑；

将公用的部分拆解定义为单独的函数：

其中，因为angular2以上的版本都是用typescript进行构建的，在typescript想要选中DOM元素时不能像js一样直接使用选择器选中，需要一定的转化：

如图，需要添加一些片段后，才能操作DOM元素不报错：

2，通过web API接口File访问在页面中选中的元素；

给出了三种方案：

（1）

（2）

（3）

然后该应用使用的是第二种方案（因为操作DOM元素比较麻烦），以下使用定义的html和函数：

html

ts：

明天的计划

1，完善获取文件的逻辑，将获取到的文件名，大小，类型等信息展示出来；

2，选中的文件尝试发送到后台进行保存；

遇到的问题

1，MDN官网的教程使用的是js进行例子演示，而ts的写法与js有很多不同，方法使用形式的也不一样，随后找到一个使用angular2进行演练的文章：

https://www.c-sharpcorner.com/article/angular-2-file-upload-using-web-api/

收获

1，当input的type= “file”，通过其他方式修改其默认演示，重新定义新的样式，该应用中采用的是label与input的组合，在这也充分利用了label会自动聚焦到其for属性所对应的id上；

有两种使用隐藏file input的方案：

（1）通过click()方法使用隐藏的file input元素；

   其主要原理是在另外元素的监听函数定义中中间接调用input的中定义的方法；

（2）通过label触发隐藏的file input元素；