主页 / coding / 问题 / 79596855
Accepted
davood beheshti
Asked: 2025-04-28 23:53:47 +0800 CST

错误类型错误：无法读取 primeng MenuModule 中的 null 属性（读取“offsetHeight”）

  • 772

我正在使用MenuModule primeng

Menu 里面的模型是信号类型

并从服务中取出

现在，当调用服务并填充模型时会显示此错误

ERROR TypeError: Cannot read properties of null (reading 'offsetHeight')

//Html代码

<h1 (click)="statusDispacherClick(213 , $event)">
    Status Click
</h1>
<p-menu #menu [model]="listStatusTypes()" [popup]="true" />

//typeScript 代码

  @ViewChild('menu') menu !: Menu;
  listStatusTypes = signal<any[]>([])

  statusDispacherClick(data, event) {
    this.service.getDashboardChangeStatusTypes(data).subscribe(dataService => {
      dataService.map(x => {
        x.label = x.title;
      })
      this.listStatusTypes.set(dataService);
      this.cdRef.detectChanges();
      this.menu.toggle(event);
    })
  }
angular

2 个回答

  1. 您应该等到 Angular 完成新模型数据的渲染后再切换菜单。请使用 setTimeout、NgZone.run 或更好的 AfterNextRender 逻辑来延迟调用，直到视图稳定为止。以下是修复方法：

    import { ChangeDetectorRef, ViewChild, inject } from '@angular/core';
import { Menu } from 'primeng/menu';
import { signal } from '@angular/core';

export class YourComponent {
  @ViewChild('menu') menu!: Menu;
  listStatusTypes = signal<any[]>([]);
  cdRef = inject(ChangeDetectorRef);

  statusDispacherClick(data: any, event: MouseEvent) {
    this.service.getDashboardChangeStatusTypes(data).subscribe(dataService => {
      dataService.map(x => {
        x.label = x.title;
      });
      this.listStatusTypes.set(dataService);

      // Wait for view update
      this.cdRef.detectChanges();

      // Allow DOM to update before toggle
      setTimeout(() => {
        this.menu.toggle(event);
      }, 0);
    });
  }
}

    setTimeout(() => ..., 0) 有效的原因：它将 toggle() 调用推送到当前 JavaScript 事件循环的末尾，从而允许 Angular 在尝试访问 offsetHeight 之前更新视图并完全呈现 DOM。

    如果您使用带有信号的 @angular/core v16+，并且正在进行反应式 UI 渲染，请考虑将基于信号的逻辑包装在 effect() 中，并通过检查 menu?.el 来控制何时调用 menu.toggle()。

    • 0
  2. Best Answer

    它看起来像一个错误，只有当我们没有立即显示菜单时才会发生。

    如果我在 API 调用完成之前打开菜单，则不会出现问题。

    作为一种解决方法，我们可以显示一个已禁用的加载指示器，然后打开菜单并进行 API 调用。

    statusDispacherClick(data, event) {
    this.listStatusTypes.set([
    { label: 'Loading...', icon: 'pi pi-spin pi-spinner', disabled: true },
    ]);
    this.menu.toggle(event);
    console.log(data, event);
    this.service.getDashboardChangeStatusTypes(data).subscribe((data) => {
    const transformedData = data.map((x: any) => {
        x.label = x.title;
        return x;
    });
    this.listStatusTypes.set(transformedData);
    });
}

    完整代码：

    TS：

    import {
Component,
OnInit,
signal,
ViewChild,
inject,
Injectable,
ChangeDetectorRef,
} from '@angular/core';
import { ImportsModule } from './imports';
import { MenuItem } from 'primeng/api';
import { Menu } from 'primeng/menu';
import { of, delay } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class DashboardService {
getDashboardChangeStatusTypes(data: any) {
    return of([
    { title: 'New', icon: 'pi pi-plus' },
    { title: 'Search', icon: 'pi pi-search' },
    ]).pipe(delay(2000));
}
}

@Component({
selector: 'menu-basic-demo',
templateUrl: './menu-basic-demo.html',
standalone: true,
imports: [ImportsModule],
})
export class MenuBasicDemo {
service = inject(DashboardService);
cdRef = inject(ChangeDetectorRef);
@ViewChild('menu', {
    read: Menu,
})
menu!: Menu;
listStatusTypes = signal<any[]>([]);

    statusDispacherClick(data, event) {
        this.listStatusTypes.set([
        { label: 'Loading...', icon: 'pi pi-spin pi-spinner', disabled: true },
        ]);
        this.menu.toggle(event);
        console.log(data, event);
        this.service.getDashboardChangeStatusTypes(data).subscribe((data) => {
        const transformedData = data.map((x: any) => {
            x.label = x.title;
            return x;
        });
        this.listStatusTypes.set(transformedData);
        });
    }
}

    HTML：

    <h1 (click)="statusDispacherClick(213 , $event)">
Status Click
</h1>
<p-menu #menu [model]="listStatusTypes()" [popup]="true" />

    Stackblitz 演示

    • 0

相关问题