Angular5 - TypeError:无法读取未定义的属性“模板" [英] Angular5 - TypeError: Cannot read property 'template' of undefined
问题描述
我使用 Angular material@5.0.0-rc.2 在 mat-table 的每一行添加了 EDIT、DELETE 和 DETAILS 按钮.所有按钮都在工作,但是,* 我收到错误无法读取未定义的属性‘模板’"和* 每次点击按钮,所有内容都显示在同一页面上
I have added EDIT, DELETE and DETAILS buttons to each row in mat-table using Angular material@5.0.0-rc.2. All buttons are working but, * I am getting an error "Cannot read property 'template' of undefined" and * for each button click, everything is displaying on the same page
itemlist.component.html
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
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
itemindex.component.html
<app-item-list [dataSource]="dataSource"
(onShow)="showItem($event)"
(onDelete)="deleteItem($event)"
(onEdit)="editItem($event)"
></app-item-list>
itemindex.component.ts
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 {}
}
任何建议都会有帮助
推荐答案
我忘记定义操作的标题单元格.所以它抛出了那个错误.这是解决这个问题的代码.
I forgot to define the header cell for the actions. So it was throwing that error. Here is the code which solved this problem.
<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>
这篇关于Angular5 - TypeError:无法读取未定义的属性“模板"的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!