我自己的Angular 2表格组件 - 2路数据绑定

Question

我看到角度2中的数据表支持非常差。 DataTables不适用于我（已知未解决的问题），所以我认为我会为自己写一些简单的东西。顺便说一下，我会学到一些有用的东西。我想用这种方式构建我的表格：

<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事件触发的一些函数来过滤并且数据应该自动更新，但是我会不知道该怎么做。

import { Component, Input, OnInit } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 

@Component({ 
    selector: 'my-table', 
    template: ` 
    <div style="width: 100%"> 
     <div style="float: left; height: 50px; width: 100%"> 
      Search: <input type="text" [(ngModel)]="filterValue" style="height: 30px; border: 1px solid silver"/> {{filterValue}} 
     </div> 
     <div style="float: left; width: 100%"> 
      <table> 
       <ng-content></ng-content> 
      </table> 
     </div> 
    </div> 
    ` 
}) 
export class MyTableComponent { 
    filterValue: string; 
} 

@Component({ 
    selector: 'my-table-row', 
    template: ` 
     <tr><ng-content></ng-content></tr> 
    ` 
}) 
export class MyTableRowComponent { 
} 

@Component({ 
    selector: 'my-table-col', 
    template: ` 
     <td><ng-content></ng-content></td> 
    ` 
}) 
export class MyTableColComponent { 
} 

问候

Answer 1

更新角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; 
    } 
    return data.filter(row => row.some(col => col && col.indexOf(filter) >= 0)); 
    } 
} 

和类似

@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 row of data | filter:filterValue"> 
     <td *ngFor="let col of row let index=index"> 
      <template [ngTemplateOutlet]="templates && templates[index]" [ngOutletContext]="{$implicit: col}"></template> 
     </td> 
     </tr> 
    </table> 
    </div> 
</div> 
    ` 
}) 
export class MyTableComponent { 
    filterValue: string; 
    @ContentChildren(TemplateRef) templateRefs:QueryList<TemplateRef>; 
    @Input() data:any[]; 
    templates:TemplateRef[]; 

    ngAfterContentInit() { 
    this.templates = this.templateRefs.toArray(); 
    } 
} 

表组件它可以用来像

@Component({ 
    selector: 'my-app', 
    template: ` 
<my-table [data]="data"> 
    <template let-col>1: {{col}}</template> 
    <template let-col>2: {{col}}</template> 
    <template let-col>3: {{col}}</template> 
</my-table> 
    `, 
}) 
export class App { 
    data = [ 
    ['apple', 'orange', 'banana'], 
    ['cat', 'dog', 'bird'], 
    ['car', 'bicycle', 'airplane'], 
    ]; 
} 

其中行和列数据被传递到输入和单元格的布局作为<template>元素传递（每列一个 - 一些附加检查可能非常有用，如检查模板数是否大于data中的列数）。