Angular5 - TypeError: Cannot read property 'template' undefined
J'ai ajouté les MODIFIER, les SUPPRIMER et les DÉTAILS des boutons à chaque ligne de tapis de table à l'aide Angulaire [email protected].
Tous les boutons fonctionnent, mais que,
* Je reçois un message d'erreur "Impossible de lire la propriété "modèle " undefined" et
* pour chaque clic sur le bouton, tout est afficher sur la même page
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.composante.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.composante.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 {}
}
Toute suggestion serait utile
Part .ts fichier de code.
OriginalL'auteur Raghu M U | 2017-12-07
Vous devez vous connecter pour publier un commentaire.
J'ai oublié de définir la cellule d'en-tête pour les actions. Donc, c'était jeter de l'erreur. Voici le code de résoudre ce problème.
le code dans la description est suffisante pour afficher la table, mais, vous avez besoin d'ajouter une fonction pour créer une nouvelle ligne.
je vous remercie, mais savez-vous comment ajouter une nouvelle ligne à l'aide de méthode http post
Jetez un oeil à ceci.
Merci beaucoup soo @Raghu M U ce code est très utile pour moi, merci beaucoup
OriginalL'auteur Raghu M U
Vérifier la configuration .fichier ts
OriginalL'auteur user123456789