Angular [email protected]。すべてのボタンは機能していますが、エラーが発生しています。未定義のプロパティ「テンプレート」を読み取ることができません」および*ボタンをクリックするたびに、すべてが同じページに表示されます
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 {}
}
どんな提案も役立ちます
アクションのヘッダーセルを定義するのを忘れました。そのため、そのエラーがスローされていました。この問題を解決したコードを次に示します。
<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>
.tsファイルの構成を確認します
displayedColumns = ['name', 'description', 'action'];
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
const ELEMENT_DATA: Element[] = [
{ name: '', description: '' },
{ name: '', description: '' }
]