Angular5 - TypeError : 정의되지 않은 'template'속성을 읽을 수 없습니다.

Question

Angular material@5.0.0-rc.2를 사용하여 매트 테이블의 각 행에 EDIT, DELETE 및 DETAILS 버튼을 추가했습니다. 내가 * 각 버튼 클릭과 "정의의 '템플릿'속성을 읽을 수 없습니다"오류를 얻고있다 * 모든 버튼, 작동되지만, 모두 같은 페이지

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

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

나는 행동에 대한 헤더 셀을 정의하는 것을 잊었다 파일을 확인합니다 도움이 될 것입니다. 그래서 그것은 그 오류를 던지고있었습니다. 이 문제를 해결 한 코드는 다음과 같습니다.

<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

이 .TS의 구성이

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

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