Мой собственный Угловой 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> 

Таким образом, я создал компонент с простым входом фильтра. Теперь я хотел бы отфильтровать свой стол. Угловой должен каким-то образом назначать данные из таблицы 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).