Question

我有一个使用材质mat-table渲染表格的组件。它工作正常，但是在我的spec文件中，该表未呈现正文的元素（tds和trs），因此测试失败。看来我正确初始化了文本，导入了MatTableModule，还初始化了mat-table的数据源。

该组件获取输入，但它会转到数据源，而不是异步的，因此在初始化输入后我调用了fix.detectChanges（）。

表和正文标签已呈现，但正文标签为空。为什么不呈现表中数据的任何建议？

谢谢

下面是测试代码的示例：

let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;
const dataSource: DataSource[] = [{id: 1, name: 'a'}];

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations:[MyComponent],
        imports: [MatTableModule],
}));

beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    debugElement = fixture.debugElement
});

it('should display results', () => {
    component.myDataSource = dataSource;
    fixture.detectChanges();

    console.log(debugElement.nativeElement); //here I see that the body is empty

    const elements = debugElement.queryAll(By.css('td'));
    expect(elements.length).toBe(2); // I get 0
});

Answer 1

尝试导入MatTableDataSource，声明包含对象数组的表，使用新的MatTableDataSource（array）初始化，并且不要忘了检查列定义，因为如果定义引起错误，则该表不会呈现（例如，它不会找到一些专栏等）

角材表规格

1 个答案: