我在Angular 8应用程序中使用上下文菜单，我也在使用Angular Material。
我从内部API获取菜单数据，并使用这些数据创建了一个数据表。我想做的是使用上下文菜单，一旦右键单击该行，就会弹出一个菜单。现在我可以在调试器中看到数据，但我得到了一个错误"；无法设置未定义的属性menuData。
view.component.html
<mat-card>
<mat-card-content>
<div class="view-container mat-elevation-z8">
<table mat-table [dataSource]="fetchedData" matSort matSortActive="{{sortCol}}"
matSortDirection="{{sortDirection}}">
<ng-container [matColumnDef]="column.columnId" *ngFor="let column of viewData.ColumnObjects">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
{{ column.propertyName }}
</th>
<td mat-cell *matCellDef="let action" (contextmenu)="onContextMenu($event, action[column.columnId])">
{{ action[column.columnId] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="viewData.ColumnIds; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: viewData.ColumnIds"></tr>
</table>
<div style="visibility: hidden; position: fixed" [style.left]="contextMenuPosition.x"
[style.top]="contextMenuPosition.y" [matMenuTriggerFor]="contextMenu">
</div>
<!--Context Right Click Menu-->
<mat-menu #contextMenu="matMenu" #contextMenu2="matMenu">
<ng-template matMenuContent let-action="action">
<button mat-menu-item (click)="onContextMenuAction1(action)">Action 1</button>
<button mat-menu-item (click)="onContextMenuAction2(action)">Action 2</button>
</ng-template>
</mat-menu>
</div>
</mat-card-content>
</mat-card>
视图组件.ts
export interface TableRow {
id: number;
col1: string;
col2: string;
}
@Component({
templateUrl: 'view.component.html'
})
export class ViewComponent implements OnInit, OnDestroy, AfterViewInit {
viewData: any;
viewName: string;
viewTag: number;
pageIndex: number;
pageSize: number;
sortCol: string;
sortDirection: string;
filter: ViewFilter;
loadType: string;
fetchedData: any;
dataSource: ViewDataSource;
pageSizeOptions: number[] = [10, 20, 50];
contextMenu: MatMenuTrigger;
contextMenuPosition = { x: '0 px', y: '0 px'};
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatMenuTrigger)
navSub: Subscription;
selection = new SelectionModel<TableRow>(true, []);
primaryTableValue: any;
constructor(private actionService: ActionService, private route: ActivatedRoute, private router: Router, public dialog: MatDialog,) {
// Init these two fields on a dummy ViewData so that the mat-table does not throw errors.
this.viewData = {
ColumnObjects: new Array(),
ViewData: {
DataRows: new Array()
}
};
}
ngOnInit() {
// Init the dataSource
this.dataSource = new ViewDataSource(this.actionService);
// Init the component the first time it is navigated to.
this.initData();
// Subscribe to the router, so that any new navigation to this component loads new data.
this.navSub = this.router.events.subscribe((e: any) => {
if (e instanceof NavigationEnd) {
this.initData();
}
});
// Subscribe to the View in the DataSource (this used to be in initData(), consider moving if unstable -Adam)
this.dataSource.view.subscribe(x => {
if (x.ActionName) {
this.viewName = x.ActionName;
this.viewData = x;
this.fetchedData = this.viewData.TableData;
// Update the paginator and sort.
this.paginator.pageIndex = x.pageIndex;
this.paginator.pageSize = x.pageSize;
this.sort.active = x.sortCol;
this.sort.direction = x.sortDirection;
// Selection updates
// Added this because the checkboxes were duplicating themselves after the merge -Adam
if (this.viewData.ColumnIds.indexOf("checkbox") == -1) {
this.viewData.ColumnIds.unshift("checkbox");
}
this.primaryTableValue = (this.viewData.ViewData.DbrAction.PrimaryTable);
// Filter update
this.filter = x.filter;
}
});
}
// Right Click Context Menu for View Data Table
onContextMenu(event: MouseEvent, action: ViewDataSource) {
event.preventDefault();
debugger;
this.contextMenuPosition.x = event.clientX + 'px';
this.contextMenuPosition.y = event.clientY + 'px';
this.contextMenu.menuData = { 'action': action };
this.contextMenu.menu.focusFirstItem('mouse');
this.contextMenu.openMenu();
}
onContextMenuAction1(action: ViewDataSource) {
alert(`Click on Action 1 for ${action}`);
}
onContextMenuAction2(action: ViewDataSource) {
alert(`Click on Action 2 for ${action}`);
}
initData() {
// Get View details from route URL params.
this.viewTag = +this.route.snapshot.paramMap.get("tag");
this.pageIndex = +this.route.snapshot.paramMap.get("index");
this.pageSize = +this.route.snapshot.paramMap.get("size");
this.sortCol = this.route.snapshot.paramMap.get("col");
this.sortDirection = this.route.snapshot.paramMap.get("dir") == "default" ? "" : this.route.snapshot.paramMap.get("dir");
this.loadType = this.route.snapshot.paramMap.get("lt");
let routeSnapParams = this.route.snapshot.queryParams;
// Get ViewFilter details from the query params
this.filter = (routeSnapParams['ColumnId']) ? new ViewFilter(routeSnapParams['ColumnId'], routeSnapParams['Selection'],
routeSnapParams['Comparator1'], routeSnapParams['UserIn1'], routeSnapParams['AndOrIn'],
routeSnapParams['Comparator2'], routeSnapParams['UserIn2']) : null;
// Load the View from the DataSource
this.dataSource.loadView(this.viewTag, this.pageIndex, this.pageSize, this.sortCol, this.sortDirection, this.filter, this.loadType);
}
ngAfterViewInit() {
// After sorting, jump back to first page of newly sorted data.
this.sort.sortChange.subscribe(
() => {
this.paginator.pageIndex = 0
});
// Sort changes and pagination events should reload the page.
merge(this.sort.sortChange, this.paginator.page)
.pipe(
tap(() => this.loadPage())
).subscribe();
}
// Loads the requested page of the View from the datasource.
loadPage() {
this.dataSource.loadView(
this.viewTag,
this.paginator.pageIndex,
this.paginator.pageSize,
this.sort.active,
this.sort.direction,
this.filter,
"ps");
}
// Opens a Dialog for applying a filter based on a given column.
filterColumn(column: any) {
// Log the unique values of the column.
console.log(column.propertyName + "(" + column.columnId + ") " + "n Values in Column:");
let contents: string = "";
for (let i in this.viewData.ColumnSets[column.columnId]) {
contents += this.viewData.ColumnSets[column.columnId][i];
contents += ", "
}
console.log(contents);
// Open the ViewFilterDialog
const dialogRef = this.dialog.open(ViewFilterDialogComponent, {
data: {
// Unique Values of the selected column
columnContents: this.viewData.ColumnSets[column.columnId],
// The user-selected filters.
filter: new ViewFilter(column.columnId, null, null, null, null, null, null)
},
width: '450px'
});
// After close, return the user-specified filter.
dialogRef.afterClosed().subscribe((filterInputs: ViewFilter) => {
this.filter = filterInputs;
this.loadPage();
});
}
modifyView() {
const dialogRef = this.dialog.open(ModifyViewComponent, {
//panelClass: 'view-settings'
height: '85%',
width: '60%'
});
}
ngOnDestroy() {
// Unsubscribes from navSub, saving memory and prevent unwanted NavigationEnd events from firing.
if (this.navSub) {
this.navSub.unsubscribe();
}
}
/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.view['source']['value'].TableData;
return numSelected === numRows.length;
}
/** Selects all rows if they are not all selected; otherwise clear selection. */
masterToggle() {
this.isAllSelected()
? this.selection.clear()
: this.dataSource.view['source']['value'].TableData.forEach((row: TableRow) =>
this.selection.select(row)
);
}
// Delete row functionality
deleteRow() {
const selectedIds = this.selection.selected.map(s => s[0]);
/*
this.selection.selected.forEach(item => {
const index: number = this.dataSource.view['source']['value'].TableData.filter (
(d: TableRow) => d === item
);
this.dataSource.view['source']['value'].TableData.splice(index, 1);
console.log(this.dataSource);
this.dataSource = new ViewDataSource(this.dataSource.view['source']['value'].TableData);
});
this.selection = new SelectionModel<TableRow>(true, []);
*/
this.actionService.deleteRow(selectedIds, this.primaryTableValue).subscribe(response => {
console.log("Success!");
});
}
}
如下声明您的MatMenuTrigger。
@ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;
或
@ViewChild('contextMenu') contextMenu: MatMenuTrigger;