如何使用*ng if在angular 4中隐藏元素？

我试图在angular 2中测试@Input。@Input隐藏或显示我的p标记。我想用jasmine测试这个功能

这是我的组件

import { Component,Input } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 4';
  @Input() enable:boolean
  constructor() { }
}

测试代码

---

测试它是否为null，而不是它是否有长度

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
console.log(PEl.nativeElement);
expect(PEl).toBeUndefined();

---

测试空值而不是长度

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
expect(PEl).tobeNull();

---

如果使用*ngIf且为false，则元素将不会呈现到dom树。所以您的PEl=fixture.debugElement.queryBy.css'p'；不返回任何内容。。。这是您在测试中必须检查的内容。@Fussel我检查的条件是什么？它的长度为0，但它不适用于meIt。它没有长度，它将为空。当启用为true时，情况如何？ExpectPel.not.toBeUndefinedsee您的测试失败了

component.enable = false;
fixture.detectChanges();
PEl = fixture.debugElement.query(By.css('p'));
expect(PEl).tobeNull();