* ngЕсли не вызывать внутри службы с помощью EventListener

Question

У меня есть label, который визуализируется с помощью *ngIf следующим образом:

<label for="file-8" id="upload-area" *ngIf="isAllowUpload">
    <input type="file" id="file-8" accept="image/*"  style="display: none;" (change)="onFileChanged($event)">
    <div class="empty-image-input">
       <img src="assets/static/media/plus-sign.svg" alt="icon" width="18" height="18">
    </div>
</label>

Функция onFileChanged:

onFileChanged(event: any) {
    this.files = event.target.files;
    this.onUpload();
}

Функция onUpload:

private onUpload() {
    const formData = new FormData();
    for (const file of this.files) {
      formData.append("file", file, file.name);
    }
    const self = this;
    this._service.uploadImage(formData)
    .pipe(finalize(() => {}))
    .toPromise()
    .then((info: any) => {
         this.isAllowUpload = false;
         this.cdRef.detectChanges();
         var container = document.getElementById('image-container');
         container.innerHTML += `
             <label id="image0">
                <div class="image-container">
                    <button type="button" id="delete-image"> </button>
                    <img src="` + info + `">
                </div>
            </label>
        `;
        document.getElementById('delete-image').addEventListener('click', function () {
           this.isAllowUpload = true;
           this.zone.run(() => this.isAllowUpload = true)
           this.cdRef.detectChanges();
        })
    })
}

Это означает, что когда служба завершает sh загрузку данных, создается содержимое html, которое добавляется к <div id="image-container">. <label> DOM скрыт, потому что isAllowUpload = false (он все еще работает). После этого я создал addEventListener это событие перехвата при нажатии <button id="delete-image">. При нажатии кнопки происходит событие, и isAllowUpload изменяет значение, но представление не отображается <label id="upload-area">.

Я пытаюсь использовать detectChanges и ngZone, но это все равно не работает. Есть ли способ переключить этот элемент DOM. Заранее спасибо!

Answer 1

Похоже, проблема с HTML в вашем экземпляре stackblitz. Вы переопределяете содержимое HTML строкой, и фактической привязки больше нет.

Разделите div, где вы добавляете данные. Пожалуйста, смотрите ниже:

<div>
    <!-- wrap div where you want to append image. -->
    <div class="property-content" id="image-container">
    </div>
    <label for="file-8" id="upload-area" *ngIf="isAllowUpload">
                  <input type="file" id="file-8" accept="image/*"  style="display: none;" (change)="onFileChanged($event)">
                  <div class="empty-image-input">
                    <img src="https://img.icons8.com/flat_round/64/000000/plus.png" alt="icon" width="18" height="18">
                  </div>
                </label>
    <p *ngIf="isAllowUpload">allow upload</p>
</div>

Найдите рабочую ссылку в stackblitz: https://stackblitz.com/edit/angular-xld2in

Answer 2

Пожалуйста, попробуйте использовать следующий метод.

this.cdRef.markForCheck();