我自己的Angular 2 Table组件 - 2路数据绑定 [英] My own Angular 2 Table component - 2 way data binding

问题描述

我发现对angular 2中的datatables的支持非常差。 DataTable 不适用于我（已知未解决的问题），所以我以为我会为自己写一些简单的东西。顺便说一下，我会学到一些有用的东西。我想以这种方式建立我的表：

 < my-table> 
< my-table-row * ngFor =let row of rows> 
< my-table-col> {{row.col1}}< / my-table-col> 
< my-table-col> {{row.col2}}< / my-table-col> 
< / my-table-row> 
< / my-table> 
  

所以我用简单的过滤器输入创建了一个组件。现在，我想过滤我的表格。 Angular应该以某种方式将数据从my-table-col（s）分配给某个变量（也许2way数据绑定将会有用？），然后我将使用由keyup事件触发的一些函数来过滤并且数据应该自动更新，但是我会不知道该怎么做。

 从'@ angular / core'导入{Component，Input，OnInit}; 
从'@ angular / platform-b​​rowser'导入{BrowserModule}; 
从'@ angular / forms'导入{FormsModule}; 
 $ b @Component（{
 selector：'my-table'，
 template：`
< div style =width：100％> 
< div style =float：left; height：50px; width：100％> 
搜索：< input type =text[（ngModel）] =filterValuestyle =height ：30px; border：1px solid silver/> {{filterValue}} 
< / div> 
< div style =float：left; width：100％> 
< table> 
< ng-content>< / ng-content> 
< / table> 
< / div> 
< / div> 
`
}）
导出类MyTableComponent {
 filterValue：string; 
 
 $ b @Component（{
 selector：'my-table-row'，
 template：`
< tr>< ng-内容>< / ng-content>< / tr> 
`
}）
导出类MyTableRowComponent {
} 
 
 @Component（{ 
选择器：'my-table-col'，
模板：`
< td>< ng-content>< / ng-content>< / td> 
 
））
 export class MyTableColComponent {
} 
  

问候

解决方案

更新Angular 5

ngOutletContext 已重命名为 ngTemplateOutletContext

另请参阅 https ：//github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

原创

为你的例如为行和列创建一个新组件似乎是不必要的。

使用一个简单的过滤器管道，如

  @Pipe（{name：'filter'}）
 export class FilterPipe implements PipeTransform {
 transform（data：any []，filter：string ）{
 console.log（'filter'，data，filter）; 
 if（！data ||！filter）{
返回数据; 
} 
 return data.filter（row => row.some（col => col&& col.indexOf（filter）> = 0））; 
 
 
 $ / code $ / pre> 
 
 
以及像
 $ b这样的表格组件
 $ b 
  @Component（{
 selector：'my-table'，
 template：`
< div style =width：100％> 
< div style =float：left; height：50px; width：100％> 
 Search：
 < input type =text
 [（ngModel）] =filterValue
 name =filter
 style =height：30px; border：1px solid silver/> 
 {{filterValue}} 
< / div> 
< div style =float：left; width：100％> 
< table> 
< tr * ngFor =let data of data | filter：filterValue> 
< td * ngFor =let col of row let index = index> 
< template [ngTemplateOutlet ] =templates&& amp; templates [index][ngOutletContext] ={$ implicit：col}>< / template> 
< / td> 
< / tr> 
< / table> 
< / div> 
< / div& gt; 
`
}）
 export class MyTableComponent {
 filterValue：string; 
 @ContentChildren（TemplateRef）templateRefs：QueryList< TemplateRef>; 
 @Input（）data：any []; 
模板：TemplateRef []; 
 
 ngAfterContentInit（）{
 this.templates = this.templateRefs.toArray（）; 
 
 
 $ / code $ / pre 
 
 
它可以像
 $ b一样使用
 $ b 
  @Component（{
 selector：'my-app'，
 template：`
< my-table [data] =data> 
< template let-col> 1：{{col}}< / template> 
< template let-col> 2：{{col}}