Здесь есть две проблемы. У меня есть служба уведомлений, которая прекрасно работает, однако я установила ее свойство display с помощью Input из хранилища, чтобы, когда уведомление не имеет каких-либо атрибутов, пустой div не занимал место:
В настоящее время это выглядит так:
@Input() type: any;
@Input() message: any;
@Input() timeout: any;
@Input() display: any;
constructor() { }
ngAfterViewInit() {
if (document.getElementById("notification")) {
document.getElementById("notification").style.display = this.display;
}
}
HTML:
<div class="shared-notification" id="notificaiton">
<alert [type]="type" [dismissOnTimeout]="timeout" [dismissible]="true">
{{ message }}
</alert>
</div>
Однако это не работает, и выдается ошибка
Cannot read property 'style' of null
Я не понимаю, почему выдает эту ошибку, поскольку компонент уже должен был быть инициализирован.
Вторая проблема заключается в том, что я пытаюсь отобразить Уведомление внутри модального окна при обнаружении ошибки, однако, уведомление заполняется (я использую инструменты ngrx dev для проверки состояния, и хранилище обновляется при возникновении ошибки), но представление не обновляется, пока я не закрою и снова не открою модальное окно.
Уведомление представлено родительским селектором, вставляемым в html модального родителя, следующим образом:
<!-- there's a lot of html so I've just put a part of it here -->
<!-- Modal body -->
<div class="modal-body no-padding bg-color-white">
<Selector-that-works >
</Selector-that-works>
<!-- Step 2 Search Form -->
<Second-Selector-That-Works>
<Second-Selector-That-Works>
<!-- Step 3: Confirmatione -->
<This-One-Works-Too>
</This-One-Works-Too>
</div>
<!-- error should show where selector is below but is delayed until Modal reOpens -->
<notification-container></notification-container>
</ng-template>
Я полагаю, что эти две проблемы связаны, поскольку обе они имеют отношение к обновлению вида модального окна, но ни одна из них не работает должным образом. Любая помощь приветствуется.