相关疑难解决方法(0)

我有一个带有排序标题的普通Angular Material 2 DataTable.所有排序都是标题工作正常.除了具有对象作为值的那个.这些根本不排序.

例如:

 <!-- Project Column - This should sort!-->
    <ng-container matColumnDef="project.name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Project Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.project.name}} </mat-cell>
    </ng-container>

请注意 element.project.name

这是displayColumn配置:

 displayedColumns = ['project.name', 'position', 'name', 'test', 'symbol'];

更改'project.name'到'project'不工作,也不"project['name']"

我错过了什么？这甚至可能吗？

这是Stackblitz: Angular Material2 DataTable排序对象

编辑: 谢谢你的所有答案.我已经使用动态数据了.所以我不必为每个新的嵌套属性添加switch语句.

这是我的解决方案:(创建一个扩展MatTableDataSource的新DataSource不是必需的)

export class NestedObjectsDataSource extends MatTableDataSource<MyObjectType> {

  sortingDataAccessor: ((data: WorkingHours, sortHeaderId: string) => string | number) =
    (data: WorkingHours, sortHeaderId: string): string | number => {
      let value = null;
      if …

说我检查它和表达,那么这两个不一样吗？

<div *ngIf="expression">{{val}}</div>

<div [hidden]="!expression">{{val}}</div>

我的mat-table工作正常，但是按照官方api文档添加mat-sort时，它在ngAfterViewInit失败，并显示以下消息

无法在ViewFeedbackComponent.ngAfterViewInit上设置未定义的属性“ sort”

关于此问题已经有一个SO帖子（请参阅以下链接）Mat-table Sorting Demo不起作用，但是我仍然无法使它起作用。

有人发现问题了吗？官方示例使用组件本身中定义的“静态” MatTableDataSource，但是我从后端进行查询。

任何帮助是极大的赞赏！

MatSortModule已导入到app.module.ts中，mat-sort-header指令已应用于列，并且ngAfterViewInit已与官方示例中的完全相同...

import {  Component,  OnInit,  ViewEncapsulation,  ViewChild,  AfterViewInit} from '@angular/core';
import {  Feedback} from '../../../../../models/feedback';
import {  FeedbackService} from '../../services/feedback.service';
import {  MatTableDataSource,  MatSort} from '@angular/material';


@Component({
  selector: 'app-view-feedback',
  templateUrl: './view-feedback.component.html',
  styleUrls: ['./view-feedback.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class ViewFeedbackComponent implements OnInit, AfterViewInit {

  feedbacks: Feedback[] = [];
  showSpinner: boolean = true;
  displayedColumns: String[] = [
    'id',
    'user',
    'timestamp',
    'stars'
  ];
  dataSource: MatTableDataSource < Feedback > ;

  @ViewChild(MatSort) sort: MatSort; …

如何在 Angular Material 中制作父级和子级等标题？

我想要这样的东西：

我只找到了这个例子： https://stackblitz.com/edit/angular-bklajw ?file=app%2Ftable-basic-example.html

但我不需要 2 行标题。

我有下表

<table mat-table [dataSource]="dataSource" matSort class="mat-elevation">

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

    <ng-container matColumnDef="id">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
        <td mat-cell *matCellDef="let employeeWrapper">{{employeeWrapper.id}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="tableColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: tableColumns;"></tr>
</table>

从这个答案，matColumnDef和对象属性必须具有相同的名称。

我做对了，employeeWrapper.id而且这种方式正在起作用。

但是对于employeeWrapper.employee.name，它是二级属性。设置matColumnDef为employee.name或name不起作用。我两个都试过了。

这个问题有解决方案/解决方法吗？