Компонент HTML не запускается после изменения связанной переменной в функции Angular .subscribe () - PullRequest
Новая
       14

Компонент HTML не запускается после изменения связанной переменной в функции Angular .subscribe ()

0 голосов
/ 23 мая 2019

Я использую * ngIf для отображения компонента в моем HTML. Переменная, которая запускает * ngIf, изменяется после нажатия кнопки в .subscribe () в файле машинописи. Хотя в конечном итоге он отображается так, как должен, пользователю нужно щелкнуть дополнительное время в любом месте страницы после нажатия кнопки, чтобы отобразить его.

Я уже пробовал .detectChanges () с ChangeDetectorRef, функциями get и set и отдельной функцией, которая изменяет переменную, которая вызывается из .subscribe ().

HTML: 

<mat-form-field>
    <input matInput #filename placeholder="Enter filename" (input)="filenameChange(filename.value)">
</mat-form-field>

<!--validateFilename() is the function with the .subscribe()-->
<button mat-raised-button (click)="validateFilename()">Validate</button>

<!--The div that should display automatically-->
<div *ngIf="filenameValid">
    <!--some code here-->
</div>

Машинопись: 

validateFilename() {
  this.s3.getS3Response(this.bucketName, this.inputFilename).subscribe(response => {

      // some code here

      // the line that should instantly trigger the *ngIf
      this.filenameValid = true;
    }

    else {
      alert("Filename not valid. Please enter new filename.")
    }
  })
}

Нет сообщений об ошибках, просто требуется произвольно размещенный дополнительный щелчок после того, как пользователь отправил правильное имя файла и нажал кнопку «Подтвердить», чтобы отобразить следующие компоненты, скрытые * ngIf

1 Ответ

0 голосов
/ 23 мая 2019

Я решил это сам для тех, кто ищет решение. Я завернул строку в ngZone. 

import { Component, OnInit, NgZone } from '@angular/core';

// some code

constructor(private ngZone: NgZone) {};

//some code

validateFilename() {
  this.s3.getS3Response(this.bucketName, this.inputFilename).subscribe(response => {

      // some code here

      // the line that should instantly trigger the *ngIf
      this.ngZone.run(() => { this.filenameValid = true });
    }

    else {
      alert("Filename not valid. Please enter new filename.")
    }
  })
}
...