无法设置未定义的属性“ menuData”

Question

我需要在我的棱角上实现右键单击连接菜单，但这会引发错误。请有人帮助我解决此问题

    <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" routerLinkActive="active">
        <button class="btn btn-primary" (click)="goToAddUser()">Add User</button>
      </a>
    </li>
  </ul>
</nav>
<div class="panel panel-primary">
  <div class="panel-heading">
    <h2>User List</h2>
  </div>
  <div class="panel-body">
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
        <th>Actions</th>
        <th>Progress</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let user of users | async; let i = index" (contextmenu)="onContextMenu($event, user)">
        <td>
          <span *ngIf="!editable">{{user.firstname}}</span>
          <input type="text" class="form-control" id="firstname" required [(ngModel)]="user.firstname" name="firstname" *ngIf="editable">
        </td>
        <td>
          <span *ngIf="!editable">{{user.lastname}}</span>
          <input type="text" class="form-control" id="lastname" required [(ngModel)]="user.lastname" name="lastname" *ngIf="editable">
        </td>
        <td>
          <span *ngIf="!editable">{{user.email}}</span>
          <input type="text" class="form-control" id="email" required [(ngModel)]="user.email" name="email" *ngIf="editable">
        </td>
        <td>
          <button (click)="goToEditUser()" class="btn btn-info">Update</button>
          <button (click)="deleteUser(user.id)" class="btn btn-danger" style="margin-left: 10px">Delete</button>
          <button (click)="goToViewUser(user.id)" class="btn btn-info" style="margin-left: 10px">Details</button>
        </td>
        <td>
          <mat-progress-bar [value]="number" style="margin-right: 300px" [bufferValue]="number+1"
                            [appProgressBarColor]="number"></mat-progress-bar>
          {{ number }}%
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

<div style="visibility: hidden; position: fixed"
     [style.left]="contextMenuPosition.x"
     [style.top]="contextMenuPosition.y"
     [matMenuTriggerFor]="contextMenu">
</div>
<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent let-user="user">
    <button mat-menu-item (click)="onContextMenuAction1(user)">Action 1</button>
    <button mat-menu-item (click)="onContextMenuAction2(user)">Action 2</button>
  </ng-template>
</mat-menu>

我的TS文件

    import { Component, OnInit, ViewChild} from '@angular/core';
import {NgserviceService} from "../ngservice.service";
import {Router} from "@angular/router";
import {User} from "../user";
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
// @ts-ignore
import { MatMenuTrigger } from '@angular/material';

@Component({
  selector: 'app-userlist',
  templateUrl: './userlist.component.html',
  styleUrls: ['./userlist.component.css'],
})
export class UserlistComponent implements OnInit {

  users: Observable<User[]>;
  private number: number = this.getRandomNumber();
  editable = false;
  @ViewChild(MatMenuTrigger, {static: false}) contextMenu: MatMenuTrigger;

  contextMenuPosition = { x: '0px', y: '0px' };

  onContextMenu(event: MouseEvent, user: User) {
    event.preventDefault();
    this.contextMenuPosition.x = event.clientX + 'px';
    this.contextMenuPosition.y = event.clientY + 'px';
    this.contextMenu.menuData = { 'user': user };
    this.contextMenu.menu.focusFirstItem('mouse');
    this.contextMenu.openMenu();
  }

  onContextMenuAction1(item: User) {
    alert(`Click on Action 1 for ${item.firstname}`);
  }

  onContextMenuAction2(item: User) {
    alert(`Click on Action 2 for ${item.firstname}`);
  }

  constructor(private _service: NgserviceService, private _route: Router) {
  }

  ngOnInit() {
    this.reloadData();
  }

  getRandomNumber(){
    return Math.floor(Math.random()*(100)+1);
  }

  // get number() {
  //   return this.getRandomNumber();
  // }

  reloadData() {
    this.users = this._service.getUserList().pipe(
      map(arrayUsers => arrayUsers.map(arrayUser => ({
        id: arrayUser[0],
        email: arrayUser[1],
        firstname: arrayUser[2],
        lastname: arrayUser[3],
      })))
    );
  }

  goToAddUser() {
    this._route.navigate(['/adduser']);
  }
  //
  // goToEditUser(id: number) {
  //   this._route.navigate(['/edituser', id]);
  // }

  goToViewUser(id: number) {
    this._route.navigate(['/viewuser', id]);
  }

  deleteUser(id: number) {
    this._service.deleteUser(id).subscribe(
      data => {
        console.log("deleted successfully");
        this.reloadData();
      },
      error => console.log(error)
    );
  }
  goToEditUser(){
      this.editable = !this.editable;
  }
}

运行此命令时，我遇到的错误为

我在@ViewChild中将'contextMenu'更改为MatMenuTrigger，这引发了我不同的错误。请帮助我解决此问题