angular2中ViewChild,索引值相关
来源:互联网 发布:大学 知乎 编辑:程序博客网 时间:2024/06/16 21:07
2017/8/24
时间
1.知识点一:angular2中的@ViewChild与@ViewChildren
ViewChild属性装饰器,用来在模板视图中获取匹配的元素
@ViewChild(TableComponent);table:TableComponent
ViewChildren用来匹配多个元素,返回的结果是一个QueryList集合
@ViewChildren(TableComponent);tables:QueryList<TableComponent>
2.知识点二:ng2 获数组中元素的索引值
文档中提供的方法NgForOf
用法:
<li *ngFor="let user of userObservable | async as users; index as i; first as isFirst"> {{i}}/{{users.length}}. {{user}} <span *ngIf="isFirst">default</span></li>
在项目中的实际应用:
我这里使用的是kendoUI,应用场景是切换选项卡,每个tab里又有各自的添加事件
<p-tabPanel *ngFor="let item of items;let i = index" [header]="item.name"> <button kendoButton (click)="add($event,item,i)" >添加</button></p-tabPanel>
其中的let i = index 即获取到了数组中元素的索引值。
3.知识点三:根据索引值获取该条数据/component
add(event,item:any,i){ const table = this.tables.toArray()[i]; table.editor.add(); }
其中的i就是获取的index值。
2017n8-25
1.知识点一:chrome F12调试
其中Network面板中的Headers和Preview
今天项目中的实例 是在做添加功能时,保存进去的数据没有id值,在Headers中中查看请求 在Preview中查看返回值。
阅读全文
0 0
- angular2中ViewChild,索引值相关
- Angular2中ViewChild与ContentChild的区别
- Angular2中ViewChild与ContentChild的区别
- Angular2父子组件之间数据传递:@ViewChild获取子组件
- Angular2中使用bootstrap
- angular2中 使用mqtt
- 使用@ViewChild @ViewChildren(ngAfterViewInit), @ViewChild@ViewChildren(ngAfterContentInit)
- 索引相关
- 索引相关
- ElementRef、Renderer2、viewChild、AfterViewInit
- Angular2环境搭建和相关信息查询
- angular2中应用obserable模式
- angular2中自定义window对象
- Angular2中如何使用jquery
- 浅聊angular2中通信方式
- Angular2中监听数据更新
- angular2中ngModel绑定问题
- angular2中ngModel绑定问题
- 前端对后台传过来是数组进行重新排序显示
- 【二叉树经典问题】106. Construct Binary Tree from Inorder and Postorder Traversal
- hdu6170(dp)
- spring cloud教程---Eureka
- pl sql
- angular2中ViewChild,索引值相关
- Spring Boot : CROS解决跨域问题(七)
- jzoj5336 【NOIP2017提高A组模拟8.24】提米树 (dfs序dp,奇异姿势dp)
- C语言 输入
- url带加号+,get时显示空格
- Linux内核中_IO,_IOR,_IOW,_IOWR宏的用法与解析
- Java中的throw和throws的区别
- 《C++程序设计教程》——初识STL
- Android 事件分发(dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent)