Блог

я пытаюсь создать шаговую форму angualar с помощью bs-stepper , я установил npm и добавил CDN внутрь index.html, когда я внедряю код в свой componenet.ts, он показывает мне эту ошибку:

 Argument of type 'Element | null' is not assignable to parameter of type 'Element'.
  Type 'null' is not assignable to type 'Element'.

51     this.stepper = new Stepper(document.querySelector('#stepper1'), {
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 

Мой компонент.ts:

 import Stepper from 'bs-stepper'
export class RegistreComponent implements OnInit {
  private stepper!: Stepper;
next() {
    this.stepper.next();
  }
  onSubmit() {
    return false;
  }



  ngOnInit(): void {
    this.stepper = new Stepper(document.querySelector('#stepper1'), {
      linear: false,
      animation: true
    })

  }

}
 

Как указывает ошибка, вы пытаетесь передать объект, который может быть нулевым. Тип document.querySelector и другие методы запросов, связанные с DOM, являются Element|null . Здесь класс Stepper принимает аргумент только элемента типа.

Просто проверьте тип null и назначьте значение ngOnInit .

 const stepperElement = document.querySelector('#stepper1');

    if(stepperElement !== null){
    this.stepper = new Stepper(stepperElement , {
          linear: false,
          animation: true
        })
    }

 

Сначала необходимо получить элемент value из элемента querySelector в ngAfterViewInit, если не в ngOnInit, то в константу, а затем добавить к нему проверку на значение null.

Нравится:

 const el = document.querySelector('#stepper1');
if(!!el) {
  this.stepper = new Stepper{el, {    
    linear: false,
    aniimation:true
  }
 }
}