我能'；t在Angular 11中使用@ViewChild、rende和渲染器隐藏mat菜单元素

我有一些元素是mat items元素，这些元素有时通过*ngIf进行渲染，有时不进行渲染（评估的条件会发生变化）

我有一个

mat菜单

元素包装这个

mat项

元素，我需要防止

mat菜单

在其包含的所有

mat项

都被计算为false时呈现（因为它显示了一个带有一些角度材质边框的空框。我尝试使用@viewChild和renderer2，但不起作用。这就是我所拥有的：

HTML:

顺便说一句，一个console.log（this.thirdPartyMenu['items']['length']）//2

但它不起作用

如果所有

mat项

元素的计算结果均为false且未呈现，如何防止呈现空的

mat菜单

元素

    <mat-menu #thirdPartyMenu="matMenu" yPosition="below" xPosition="after" overlapTrigger="false">
        <button mat-menu-item color="primary" (click)="openThirdPartyApp('edl')" *ngIf="thirdParty">
            <mat-icon>analytics</mat-icon>
            <span> Tablero EDL </span>
        </button>  
        
        <button mat-menu-item color="primary" (click)="openThirdPartyApp('edl')" >
            <mat-icon>analytics 2</mat-icon>
            <span> one </span>
        </button>  

        <button mat-menu-item color="primary" (click)="openThirdPartyApp('edl')" >
            <mat-icon>analytics 3</mat-icon>
            <span> two </span>
        </button>  
    </mat-menu>

@ViewChild('thirdPartyMenu', {static:true}) thirdPartyMenu: any;

ngAfterViewInit() {
    this.launcherDistance =
        this.notificationsBell._elementRef.nativeElement.offsetLeft - 50;

        if(this.thirdPartyMenu['items']['length'] === 0){ 
            this.renderer.setStyle(this.thirdPartyMenu.nativeElement, "display", "none")
        }else {
            this.renderer.setStyle(this.thirdPartyMenu.nativeElement , "display", "block")

        }

}