Question

在有角项目中，我需要测试是否将primeng数据表的显示表宽度设置为我为其分配的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”

Answer 1

我看到您提出问题已经两个月了，所以我的答案可能为时已晚，但是我在查找有关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的值。

如何访问Primeng表的样式属性

1 个答案: