錯誤類型錯誤：無法讀取未定義的屬性（讀取“nativeElement”）：我該如何解決？

Question

我當前代碼的狀態是這樣的：

<mat-tree-node>
...
 <div *ngIf="node.type=='assembly' || node.type=='part'" style="display: inline;"
                    (contextmenu)="asmStateServ.contextMenu($event, node.name)">{{node.instanceName}}
                    ({{node.name}})
                    <div class="customContext" (click)="asmStateServ.stopPropagation($event)" #menu>
                        <ul>
                            <li (click)="asmStateServ.selectNode(node.name)">Select</li>
                            <li (click)="asmStateServ.deSelectNode(node.name)">Deselect</li>
                        </ul>
                    </div>
                </div>
</mat-tree-node>

在 .ts 文件中，它是這樣的：

@ViewChild('menu') menu: ElementRef
    public contextMenu(event: MouseEvent, node: asmTreeNode | asmTreeNodeFlat | asmTreeNodeScene) {
        event.preventDefault();
        this.menu.nativeElement.style.display = "block";
        this.menu.nativeElement.style.top = event.pageY + "px"
        this.menu.nativeElement.style.left = event.pageX + "px"

    }

    public disappearContextMenu() {
        this.menu.nativeElement.style.display = "none";

    }

    public stopPropagation(event: any) {
        event.stopPropagation();

    }

但是，菜單沒有打開，並且特定的控制台錯誤仍然存​​在。 我想知道在這種情況下可能有什么問題？ 我在 Angular 和編程方面非常陌生，所以如果你寫下正確的代碼，這對我來說意義重大:)

Answer 1

您可以在 nativeElement 之前添加空檢查（？）

        this.menu?.nativeElement?.style.display = "none";

Answer 2

您正在嘗試在屬性asmStateServ中使用@ViewChild ，我猜它的名稱是注入服務。 @ViewChild('menu')僅在組件類的屬性初始化器中有效，在注入的服務內部無效。 不過，您可以輕松地將此元素作為參數傳遞給這些方法。 請注意，這會傳遞HTMLDivElement而不是ElementRef 。

我只是在這里展示相關部分。

<mat-tree-node>
  ...
  <div (contextmenu)="asmStateServ.contextMenu($event, menu)">
    ...
    <div #menu>...</div>
  </div>
</mat-tree-node>

    public contextMenu(event: MouseEvent, menu: HTMLDivElement) {
        event.preventDefault();
        menu.style.display = "block";
        menu.style.top = event.pageY + "px"
        menu.style.left = event.pageX + "px"
    }