Дочерние элементы, не признающие, что директива родителей расширяет материальную директиву - PullRequest
0 голосов
/ 22 мая 2019

Я расширяю директиву MatSort для углового материала, чтобы можно было сортировать по нескольким столбцам.Я использую мою директиву на matTable.Я получаю сообщение об ошибке, что MatSortHeader должен содержаться в matSort.

Вот директива

export class MySortDirective extends MatSort{
  constructor() {
    super()
   }
   rules: Sort[] = [];

   sort = (sortable: MatSortable): void => {
    console.log(sortable,'hi')
    if (this.active != sortable.id) {
      this.active = sortable.id;
      this.direction = sortable.start ? sortable.start : this.start;
      this.rules.unshift({active: this.active, direction: this.direction});
    } else {
      this.direction = this.getNextSortDirection(sortable);
      this.rules=this.rules.filter(r=>r.active!=this.active);
      if(this.direction)this.rules.unshift({active: this.active, direction: this.direction});
    }
  }
}

Вот соответствующий component.ts (используя Lodash orderBy)

@ViewChild(MySortDirective) sort: MySortDirective;

  data:MatTableDataSource<{}> = new MatTableDataSource(this.votes);

  ngOnInit() {
    this.data.sort = this.sort
    this.data.sortData = (data:{}[],sort:MySortDirective)=>orderBy(data,sort.rules.map(r=>r.active),sort.rules.map(r=>r.direction as direc));
  }

Здесь уместен html

<mat-table [dataSource]=data mySort >
    <ng-container matColumnDef="title">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> No. </th>
        <td mat-cell *matCellDef="let element"> {{element.title}} </td>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="votes">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
        <td mat-cell *matCellDef="let element"> {{element.votes}} </td>
      </ng-container>
</mat-table>

Как уведомить компоненты заголовка mat-sort-header, что mySort расширяет matSort.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...