Блог

Здравствуйте, у меня возникла проблема с проверкой директивы в элементе в dom, если значение директивы равно true, он должен присвоить классу css определенное имя класса, иначе другое имя класса

Я получаю следующую ошибку: Не удается прочитать свойство «свойства» null

Технические характеристики

 import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser';  import { UiSetLabelStateDirective } from './set-label-state.directive';  // Simple test component that will not in the actual app @Component({  template: `  lt;p [setLabelState]="true"gt;Bold labellt;/pgt;  lt;p [setLabelState]="false"gt;normal labellt;/pgt;  lt;pgt;Testing Directives is awesome!lt;/pgt;  `, }) class TestComponent {}  describe('UiSetLabelStateDirective', () =gt; {  let component: TestComponent;  let fixture: ComponentFixturelt;TestComponentgt;;   beforeEach(() =gt; {  TestBed.configureTestingModule({  declarations: [TestComponent, UiSetLabelStateDirective],  });   fixture = TestBed.createComponent(TestComponent);  component = fixture.componentInstance;  });   test('should add font-weight-bold class if setLabelState is true', () =gt; {  const elements = fixture.debugElement.query(By.css('p[setLabelState=true]'));  expect(elements.properties.className).toEqual('font-weight-bold');  });   test('should add unselected class if setLabelState is false', () =gt; {  const elements = fixture.debugElement.query(By.css('p[setLabelState=false]'));  expect(elements.properties.className).toEqual('unselected');  }); });  

Директива.ts

 import { Directive, ElementRef, Input, OnInit, Renderer2 } from '@angular/core';  @Directive({  selector: '[setLabelState]', }) export class UiSetLabelStateDirective implements OnInit {  @Input() public setLabelState: boolean;  private element: HTMLInputElement;  constructor(private renderer: Renderer2, private elementReference: ElementRef) {  this.element = this.elementReference?.nativeElement as HTMLInputElement;  }  public ngOnInit(): void {  if (!this.element) {  return;  }  if (this.setLabelState) {  this.renderer.addClass(this.element, 'font-weight-bold');  } else {  this.renderer.addClass(this.element, 'unselected');  }  } }    

Спасибо вам за вашу помощь и ответы