Javascript 测试angular 4组件时，DebugElement.nativeElement上不显示类属性

我有一个简单的angular组件，其中我根据一个条件向html标记添加了一个类：

<td><i ngClass="{{ iconType }}" aria-hidden="true" ></td>

工作正常，在浏览器中呈现页面时，我可以看到预期的图标。然而，当我尝试编写测试时，我不能没有任何类。 这是我的测试：

describe('TableRowComponent', () => {
let tableRowFixture: ComponentFixture<TableRowComponent>;
let component: TableRowComponent;

beforeEach(() => {
    TestBed.configureTestingModule({
        imports: [
            FlipperModule.forRoot({
                provide: 'flippers',
                useValue: []
            }),
            MomentModule
        ],
        declarations: [
            TableRowComponent
        ],
        schemas: [
            CUSTOM_ELEMENTS_SCHEMA
        ],
        providers: [
            {
                provide: FlipperService,
                useValue: {
                    isOn: () => true,
                    isOff: () => false
                }
            }
        ]
    });

    tableRowFixture = TestBed.createComponent(TableRowComponent);
    component = tableRowFixture.componentInstance;
    const twoDays = 172800000;
    component.deployable = {
        'name': 'ems-event-segmentation-staging',
        'lastDeployDate': '2017-06-02T15:05:09Z',
        'type': 'service',
        'syncDelay': twoDays,
        'commitLag': 2
    };
});

    it('should display the expected icon based on the iconType property', () => {
        const icon: DebugElement = tableRowFixture.debugElement.query(By.css('i'));
        console.log(icon.nativeElement);

});

description（'TableRowComponent'，（）=>{
let tableRowFixture：组件夹具；
let组件：TableRowComponent；
在每个之前（（）=>{
TestBed.configureTestingModule({
进口：[
FlipperModule.forRoot({
提供：'脚蹼'，
使用价值：[]
}),
动量模块
],
声明：[
TableRowComponent
],
模式：[
自定义\u元素\u模式
],
供应商：[
{
提供：FlipperService，
使用价值：{
伊森：（）=>没错，
isOff:（）=>错误
}
}
]
});
tableRowFixture=TestBed.createComponent（TableRowComponent）；
component=tableRowFixture.componentInstance；
施工两天=17280000；
component.deployable={
“名称”：“ems事件分段暂存”，
“最后部署日期”：“2017-06-02T15:05:09Z”，
“类型”：“服务”，
“同步延迟”：两天，
“commitLag”：2
};
});
它（'应根据iconType属性显示预期的图标'，（）=>{
常量图标：DebugElement=tableRowFixture.DebugElement.query（By.css（'i'））；
console.log（icon.nativeElement）；
});

}))

我的日志输出是：

LOG: <i _ngcontent-c30="" aria-hidden="true"></i>

日志：

---

为什么类属性在这里不可见？

因为类是接受表达式的

ngClass

指令，所以它在组件编译后不会立即可用

  tableRowFixture.detectChanges();

---

应在对调试元素执行查询之前执行。

请尝试

class=“{{iconType}}”

@handris语法不应该是

[ngClass]=[iconType]

？你能试试这个吗？