Angular5 - TypeError: Kann die Eigenschaft 'template' von undefined nicht lesen

Question

Ich habe EDIT, DELETE und DETAILS Tasten zu jeder Zeile in der Mat-Tabelle mit Angular material@5.0.0-rc.2 hinzugefügt. Alle Tasten funktionieren aber, * ich eine Störung erhalte „Kann nicht lesen Eigenschaft‚template‘undefinierter“ und * für jede Taste klicken, wird alles angezeigt wird auf der gleichen Seite

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 {} 
} 

würde Jeder Vorschlag hilfreich sein

Answer 1

Ich habe vergessen, die Titelzelle für die Aktionen zu definieren. Also warf es diesen Fehler. Hier ist der Code, der dieses Problem gelöst hat.

<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 2

Überprüfen Sie die Konfiguration in .ts Datei

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

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