Angular5

Question

我使用 Angular material@5.0.0-rc.2 向 mat-table 中的每一行添加了编辑、删除和详细信息按钮。所有按钮都可以使用，但是， * 我收到一个错误 "Cannot read property 'template' of undefined" 并且 * 每次点击按钮，所有内容都显示在同一页面上

itemlist.component.html

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="description">
    <mat-header-cell *matHeaderCellDef> Description </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="actions">
    <mat-cell *matCellDef="let row">
      <button mat-button (click)="showDetails(row)">DETAILS</button>
      <button mat-button (click)="editItem(row)">EDIT</button>
      <button mat-button (click)="deleteItem(row)">DELETE</button>
    </mat-cell>
  </ng-container>

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

itemlist.component.ts

export class ItemListComponent {
  @Input() dataSource;
  displayedColumns = ['name', 'description', 'actions'];

  @Input() items: Item[];
  @Output() onEdit = new EventEmitter<Item>();
  @Output() onShow = new EventEmitter<Item>();
  @Output() onDelete = new EventEmitter<Item>();

  itemsTrackByFn = (index: string, item: Item) => item.id;

  showDetails(item: Item) {
    this.onShow.emit(item);
  }
  editItem(item: Item) {
    this.onEdit.emit(item)
  }
  deleteItem(item: Item) {
    this.onDelete.emit(item)
  }
}

itemindex.component.html

<app-item-list [dataSource]="dataSource"
              (onShow)="showItem($event)"
              (onDelete)="deleteItem($event)"
              (onEdit)="editItem($event)"
></app-item-list>

itemindex.component.ts

export class ItemIndexComponent implements OnInit {
  items$: Observable<Item[]>;
  public dataSource: ItemsDatasource;

  constructor(public store: Store<fromRoot.State>, private router: Router){}

  ngOnInit() {
    this.items$ = this.store.select(fromItems.getAllItems);
    this.store.dispatch(new itemsActions.LoadAll());
    this.dataSource = new ItemsDatasource(this.items$);
  }

  editItem(item: Item) {
    this.store.dispatch(new itemsActions.SetCurrentItemId(item.id));
    this.router.navigate(['/items', item.id, 'edit'])
  }
  showItem(item: Item) {
    this.store.dispatch(new itemsActions.SetCurrentItemId(item.id));
    this.router.navigate(['/items', item.id])
  }
  deleteItem(item: Item) {
     this.store.dispatch(new itemsActions.Delete(item.id));
   }
 }
}


export class ItemsDatasource extends DataSource<Item> {

  public constructor(private items$: Observable<Item[]>) {
    super()
  }

  public connect(collectionViewer: CollectionViewer): Observable<Item[]> {
    return this.items$;
  }

  public disconnect(collectionViewer: CollectionViewer): void {}
}

任何建议都会有帮助

Answer 1

检查.ts文件中的配置

displayedColumns = ['name', 'description', 'action'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

const ELEMENT_DATA: Element[] = [
    { name: '', description: '' },
    { name: '', description: '' }
]

Answer 2

我忘记为操作定义 header 单元格。所以它抛出了那个错误。这是解决这个问题的代码。

<ng-container matColumnDef="actions">
  <mat-header-cell *matHeaderCellDef></mat-header-cell>
  <mat-cell *matCellDef="let row">
    <button mat-button (click)="showDetails(row)">DETAILS</button>
    <button mat-button (click)="editItem(row)">EDIT</button>
    <button mat-button (click)="deleteItem(row)">DELETE</button>
  </mat-cell>
</ng-container>

Answer 3

I faced this error because, I forget to add th and td in ng-container

<ng-container matColumnDef="actions">

</ng-container>

Answer 4

我遇到了同样的问题。我不小心用了 *matCelLDef 而不是 *matCellDef。

Answer 5

我的解决方案是在 ng-container 元素中添加 mat-cell 元素：

原代码为：

  <ng-container matColumnDef="testColumn">
    <mat-header-cell *matHeaderCellDef>testColumn</mat-header-cell>
  </ng-container>

修复它的代码更新：

  <ng-container matColumnDef="testColumn">
    <mat-header-cell *matHeaderCellDef>testColumn</mat-header-cell>
    <mat-cell *matCellDef="let element">{{ element.testColumn}}</mat-cell>
  </ng-container>

Answer 6

对我来说是缺少的页脚单元格

<td mat-footer-cell *matFooterCellDef > </td >

添加这个修复它。

Angular5 - TypeError: Cannot read property 'template' of undefined

Angular5 - TypeError: Cannot read property 'template' of undefined

angular-material

angular-material2

angular