Свойство openCity не имеет инициализатора и точно не назначается в конструкторе. Угловой 13

Question

Привет, я пытаюсь открыть модальную страницу при загрузке страницы в angular 13. Я использую ElementRef, чтобы нажать кнопку при загрузке страницы, но я получаю Property 'openCity' has no initializer and is not definitely assigned in the constructor. пожалуйста, помогите мне решить эту проблему.

app.component.ts

       @ViewChild('openCity') openCity:ElementRef;

    ngOnInit(){
        this.openCity.nativeElement.click();
      }

app.component.html

      <button id="openCity" #select_city [hidden]="false"
 data-toggle="modal" data-target="#select_city">Open</button>

 <div class="ltn__modal-area ltn__add-to-cart-modal-area">
    <div class="modal fade" id="select_city" data-backdrop="static" tabindex="-1">
      <div class="modal-dialog modal-md" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                  </button>
              </div>
              <div class="modal-body">
                  <div class="ltn__quick-view-modal-inner">
                      <p>Modal Open</p>
                  </div>
              </div>
          </div>
      </div>
    </div>
 </div>

Answer 1

Просто иди к себе tsconfig.jsonи добавьте этот код ниже.

      "strictPropertyInitialization": false

Надеюсь, это решит вашу проблему.

Answer 2

Изменять

      @ViewChild('openCity') openCity: ElementRef;

к

      @ViewChild('select_city') openCity!: ElementRef;

Для получения html-элементов angular использует свои ссылочные переменные, а не html-идентификаторы.

Восклицательный знак должен сообщить машинописному тексту, что эта переменная обязательно будет инициализирована, но позже.

Объяснение ошибки

Ошибка возникает из-за ESLint/TSLint, который по умолчанию установил "strictPropertyInitialization": true. Это правило требует, чтобы все переменные компонента были инициализированы во время объявления или в конструкторе. Здесь у вас есть переменная openCity, который только объявлен, и его значение устанавливается позже жизненным циклом angular. Typescript этого не знает, поэтому жалуется. Восклицательный знак просто говорит typescript, что вы уверены, что переменная будет иметь значение.

В качестве альтернативы вы можете установить для strictPropertyInitialization значение false в конфигурации, чтобы отключить эту ошибку в проекте wole. Я бы не рекомендовал этого, потому что, в конце концов, инициализация переменных при их объявлении является хорошей практикой (вы можете избежать многих ошибок из undefinedпеременные тем самым).