html - 如何访问Primeng表的样式属性

在角度项目中，我需要测试是否将primng数据表的显示表宽度设置为我为其分配的maxWidth值。为此，我想调用[style]属性以获取宽度，并查看其是否等于我的maxWidth。但是，我不知道如何调用这样的属性。我该怎么办？目前我不知道我是否朝着正确的方向前进。

我已经尝试了几种方法，但是不确定其语法。

<p-table class="p-table" ... [style] = "{width: maxWidth}" >

it('should implement maxwidth', () => {
    const widthDebug: DebugElement = fixture.debugElement;
    const tableWidth = widthDebug.query(By.css('.ui-table .ui-widget'));
    const ptable: HTMLElement = tableWidth.nativeElement;

    expect(ptable.textContent).toContain("width: " + component.maxWidth);

});

预期：成功（ptable.textContent包含“ width：component.maxWidth”）
实际：TypeError：无法读取null的属性“ nativeElement”

最佳答案

我看到现在已经是您提出问题两个月了，所以对于我的回答来说可能为时已晚，但是我在查找有关PrimeNG的其他内容时偶然发现了这篇文章，因此不妨试一下。

这里的问题是nativeElement是在Angular Dialog组件的p-table类实例上定义的。它没有在任何特定的DOM元素上定义。

By.css('.ui-table .ui-widget')将为您找到一个DOM元素，而不是Angular类实例。特别是，将在<div> DOM元素内找到一个<p-dialog>，正是该<div>接收通过[style]=...设置的样式。

当您的代码写在tableWidth.style.width上面时，它将包含（作为字符串）您期望找到的maxWidth值。