Angular Material 2 中未定义 mdSort

Question

我正在与 Angular Material Table 合作。我想用 mdSort 对项目进行排序，但是当我启动应用程序时，table 说 mdsort 的视图子项未定义。什么错误？

我的代码与此处的示例相同：material.angular.io

这是错误日志：

ERROR TypeError: Cannot read property 'mdSortChange' of undefined
at AliasDataSource.webpackJsonp.../../../../../src/app/admin/admin.component.ts.AliasDataSource.connect (admin.component.ts:106)
at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable._observeRenderChanges (cdk.es5.js:2005)
at MdTable.webpackJsonp.../../../cdk/@angular/cdk.es5.js.CdkTable.ngDoCheck (cdk.es5.js:1970)
at checkAndUpdateDirectiveInline (core.es5.js:10897)
at checkAndUpdateNodeInline (core.es5.js:12382)
at checkAndUpdateNode (core.es5.js:12321)
at debugCheckAndUpdateNode (core.es5.js:13182)
at debugCheckDirectivesFn (core.es5.js:13123)
at Object.eval [as updateDirectives] (AdminComponent.html:27)
at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13108)

我的HTMLtable剪掉了

 <md-table #table [dataSource]="aliasSource" mdSort>

    <ng-container cdkColumnDef="aliasId" md-sort-header>
      <md-header-cell *cdkHeaderCellDef> Alias</md-header-cell>
      <md-cell *cdkCellDef="let a"> {{ a.AliasName }}</md-cell>
    </ng-container>
    ...
 </md-table>

class 他说它是未定义的

export class AliasDataSource extends DataSource<any> {
constructor(private _aliasDatabase: AliasDatabase, private _sort: MdSort) {
  super();
}

/** Connect function called by the table to retrieve one stream containing 
the data to render. */
 connect(): Observable<Mailalias[]> {
const displayDataChanges = [
  this._aliasDatabase.dataChange,
  this._sort.mdSortChange, // here is the point where the exception throws
];

return Observable.merge(...displayDataChanges).map(() => {
  return this.getSortedData();
});
}

disconnect() {}

/** Returns a sorted copy of the database data. */
getSortedData(): Mailalias[] {
const data = this._aliasDatabase.data.slice();
if (!this._sort.active || this._sort.direction == '') { return data; }

return data.sort((a, b) => {
  let propertyA: number|string = '';
  let propertyB: number|string = '';

  switch (this._sort.active) {
    case 'aliasId': [propertyA, propertyB] = [a.ID, b.ID]; break;
    case 'adresse': [propertyA, propertyB] = [a.FromAddr, b.FromAddr]; break;
    case 'name': [propertyA, propertyB] = [a.FromName, b.FromName]; break;
  }

  let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
  let valueB = isNaN(+propertyB) ? propertyB : +propertyB;

  return (valueA < valueB ? -1 : 1) * (this._sort.direction == 'asc' ? 1 : 
 -1);
});
}
}

我的主要 class 的 TS 文件

export class AdminComponent implements OnInit {



aliasColumns = ['aliasId', 'adresse', 'name', 'host', 'password', 'port', 'ssl', 'user', 'menu'];
  aliasSource: AliasDataSource | null;
  @ViewChild(MdSort) sort: MdSort;
  alias: Mailalias[];
  isLoading = false;

  constructor(private ms: MailService, private router: Router) {
  }

  ngOnInit() {
    this.isLoading = true;
    console.log(this.sort);
    this.ms.getAll().subscribe(res => {
      this.alias = res;
      const aliasDatabase = new AliasDatabase(res);
      this.aliasSource = new AliasDataSource(aliasDatabase, this.sort);
      // this.aliasSource = new AliasDataSource(aliasDatabase);
      this.isLoading = false;
      this.isLoading = false;
      const a = AliasFactory.errorObject(res);
      if (a.Status === 401) {
        this.router.navigate(['/login']);
      }
    });
  }
}

Answer 1

在HTML

 <table mdSort (mdSortChange)="sortData($event)">

在TS中有实现和逻辑。参考 example

初始值

desserts = [
    {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'},
    {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'},
    {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'},
    {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'},
    {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'},
  ];

const data = this.desserts.slice();

排序逻辑

this.sortedData = data.sort((a, b) => {
      let isAsc = sort.direction == 'asc';
      switch (sort.active) {
        case 'name': return compare(a.name, b.name, isAsc);
        case 'calories': return compare(+a.calories, +b.calories, isAsc);
        case 'fat': return compare(+a.fat, +b.fat, isAsc);
        case 'carbs': return compare(+a.carbs, +b.carbs, isAsc);
        case 'protein': return compare(+a.protein, +b.protein, isAsc);
        default: return 0;
      }
    });

也实现下面的功能

function compare(a, b, isAsc) {
  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}

Answer 2

所以现在我发现我的错误 id 在我的 div 容器中有一个 ngIf 那是我的 table -.-

当有人遇到同样的问题时，看看你之前的标签中是否有 ngIf !!!

不过感谢@Habeeb 的帮助

Answer 3

我也遇到了。不要忘记将 MdSortModule 添加到您的进口清单中。

Answer 4

添加 MdSortModule 到您模块的导入列表。

如果您正在定义 NgModule，并且模块的组件使用 mdSort，您必须按如下方式更新 NgModule 的导入:

@NgModule({
    imports:[MdTableModule,
             ...
             MdSortModule
            ],
     ...
})
export class ModuleThatImportsMdSortModule{}

Angular Material 2 中未定义 mdSort

mdSort is undefined in Angular Material 2

angular-material2