Угловой модал не обновляется с изменением переменной компонента

Question

Я использую компонент для отправки SMS, и он добавляется к компоненту панели навигации следующим образом:

<ng-template #smsModal let-c="close" let-d="dismiss">
    <div class="modal">
        <app-sms></app-sms>
    </div>
</ng-template>

Компонент sms HTML выглядит следующим образом:

    <form>
    <input type="text" [(ngModel)]="send.mobileNumber" #ctrl="ngModel" name="mobileNumber">

       <button class="send-SMS-btn ripple" (click)="sendMessage()" [disabled]="textSending">
          <span *ngIf="!textSending">Send Message</span>
          <app-spinner *ngIf="textSending"></app-spinner>
      </button>
      <div class="textmsg text-danger" *ngIf="textError">{{textError}}</div>
      <div class="textmsg success" *ngIf="textSuccess">{{textSuccess}}</div>
</form>

метод sendMessage() имеет следующий код:

 this.textSending    = false;

 if (_.isEmpty(this.send.mobileNumber)) {
            this.textError = "Please enter a valid phone number";
            return false;
        }

        this.textSending    = true;
        this.textSuccess    = null;

        // API call and stuff
}

Когда я поддерживаю this.textError, он выдает правильное сообщение об ошибке, но оно не обновляется в представлении.Сам контейнер ошибок div не заполняется, а также spinner не отображается.Почему-то вид не обнаруживает изменений.Вызов API вызван, но он также не отображает сообщение об ошибке, даже если оно отображается в консоли.Как это можно исправить?

Answer 1

Типичный способ адресации входных данных, передаваемых в компонент, - это объявление ввода как BehaviorSubject.

Например:

import { Component, Input } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs/Rx';

@Component({
  selector: 'my-component-selector',
  templateUrl: './my.component.html'
})
export class MyComponent {

  @Input()
  public set yourErrorTextMessage(data) {
    this.yourErrorTextMessageSubject.next(data);
  };

  private yourErrorTextMessageSubject = new BehaviorSubject<string>("");

}

Это связываетфактическое значение для субъекта поведения, и шаблон получает уведомления о любых изменениях в нем, включая значения до инициализации шаблона.Таким образом, ваше сообщение об ошибке может обновляться асинхронно, и ваш компонент получит значение для последнего сообщения об ошибке, произошло ли это до или после инициализации.

Answer 2

Вероятно, потребуется перезапустить цикл дайджеста снова.используйте сервис changeDetectorRef

constructor( 
    private changeDetectorRef: ChangeDetectorRef,
) {
}

, вызовите метод detectChanges внутри sendMessage, метод

   if (_.isEmpty(this.send.mobileNumber)) {
            this.textError = "Please enter a valid phone number";
            return false;
   }

   this.textSending    = true;
   this.textSuccess    = null;

   this.changeDetectorRef.detectChanges(); // start the cycle again