Angular 5+ компонент HTMLElement.style.display внезапно дает не удается прочитать свойство 'style' из 'null' - PullRequest
0 голосов
/ 13 июля 2020

У меня есть приложение angular 5.2.0 / Typescript 2.6.2 и Node 8.5.0, которое использует

HTML:
    <button mat-raised-button id="submitDescription" class="submit-class" [ngStyle]="{'color': 
     themeFontColor()}" (click)="submit(false)">{{submit}}</button>
 ...

Component.ts:
 ....
 submitBtn: HTMLElement;
 .....
 .....
 ngOnInit{
 ......
 .......
 } 
  ngAfterViewInit() {
    this.submitBtn = document.getElementById('submitDescription');
    this.viewLoaded = true;
   
  }

Теперь внезапно строка

 this.submitBtn.style.display = 'none';

вызывает эту ошибку

 Error: Uncaught (in promise): TypeError: Cannot read property 'style' of null
TypeError: Cannot read property 'style' of null

Подобный код теперь состоит из двух компонентов без каких-либо изменений кода. Я получаю эту ошибку в обоих местах, что заставляет меня думать, что что-то внешнее изменилось, но я не знаю, что именно. Могут ли сервисные работники вызвать эту проблему?

EDIT:

HTML:
  <input [ngClass]='{"has-error":(wholeDescriptionRef.invalid && submitted), "has-success":(wholeDescriptionRef.valid && submitted)}' type="text" class="form-control query-input content-light-blue-color" id="wholeDescription" placeholder="{{ezzy.LOCALIZATION.requestPlaceHolder}}"
            [ngStyle]="{'background-color': ezzy.getThemeSecondaryColor()}" name="wholeDescription" [(ngModel)]="wholeDescription" maxlength="100" #wholeDescriptionRef="ngModel" required (keyup)="submitOnEnter($event)">
        <button mat-raised-button #submitDescription class="submit-class" [ngStyle]="{'color': ezzy.getThemeFontColor()}" (click)="submit(false)">{{ezzy.LOCALIZATION.submit}}</button>
        <span [hidden]="!ezzy.supportsSpeech" (click)="ezzy.startDictation(this, 'wholeDescription', 'submit', 'wholeDescription', 'submitDescription')" class="input-group-addon cursor-pointer icon-style" [ngStyle]="{'color':'#ffffff','background-color': ezzy.getThemeHeaderColor(), 'border': ezzy.getThemeBorderColor(), 'border-collapse': 'collapse'}">
        <i class="fa fa-microphone fa-lg" aria-hidden="true"></i></span>

1 Ответ

0 голосов
/ 18 июля 2020

По-видимому, ответ лежит в tsconfig. json файл ... (ссылка на этот ответ https://github.com/angular/components/issues/9813)

  ......
  ........
  "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom",
      "es2015"
    ]

Где "target": "es2015" должен установить на "es5"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...