angular 2 ngx-modal - как обновить переменную при повторном открытии

Мне интересно, почему мой модальный контент не обновляется после повторного открытия модального. У меня есть форма в модале. Модал включает в себя компонент "app-report-buttons", который выполняет вызов API, если вызов "false", showMessage устанавливается в false в "app-report-buttons". Я закрываю модальное и снова открываю его, пытаюсь "сбросить" это значение и передать true в "app-report-buttons". Это не работает! Почему модал не обновляет свой контент после его открытия?

export class JobEditModalComponent implements OnInit, OnChanges {

    @ViewChild ('editJob') modal: any;

    private showTokenMessage: Boolean = false;

    public EDIT_METHOD_TYPE = {
        DASHBOARD: 'dashboard',
        EDIT: 'editJob',
        FINISH: 'finish'
    };

    constructor ( private fb: FormBuilder,
                  private visibilityService: VisibilityService,
                  private dataStorageService: DataStorageService, private Account: AccountService,
                  private JobsService: JobsService,
                  private changeDetector: ChangeDetectorRef ) {
    }

    ngOnInit () {
        this.buildForm ();
    }


     openModal () {
        this.showTokenMessage = false; // this value I like to pass to template -> to child componente
        
        this.modal.open ();
        this.changeDetector.detectChanges();
    }


    buildForm (): void {
          }

    initEditMethodFormGroup () {
           }

    setEditMethodType ( type: string ) {
       
    }

    subscribeEditTypeChanges () {
      
            }
 
}

export class ReportButtonsComponent implements OnInit , OnChanges{

@Input () jobMetaData: Job;
@Input () showTokenMessage: boolean;

constructor ( private patientCurrentService: PatientCurrentService,
              private windowRefService: WindowRefService,
              private dataStorageService: DataStorageService,
              public sanitizer: DomSanitizer, public visibilityService: VisibilityService,
              public browserService: BrowserService ) {

    this.workshopName = windowRefService.workshopName;
    this.workshopGuid = windowRefService.workshopGuid;
    this.workshopEmail = windowRefService.workshopEmail;
    this.workshopStuff = windowRefService.workshopStuff;
    this.uid = windowRefService.uid;
    this.omAppSettingsOmReport = windowRefService.omAppSettings.omReport;
    this.languageData = windowRefService.languageData;
    this.lang = this.windowRefService.lang
}

ngOnInit () {
    console.log('buttons' + this.showTokenMessage);
    this.createReportButtons ();
}
}
   
<modal #editJob class="o-edit-modal" (onOpen)="onOpenModal()">
    <modal-header>
        <h3 i18n="job-edit-title">Job administration - Job ID: {{jobMetaData.jobId}}</h3>
    </modal-header>
    <modal-content class="o-edit-modal__content">
        <!-- div *ngIf="!successDisablePatient && !successEditPatient" class=" o-patient-edit-form" -->
        <div class="o-patient-edit-form">
            <form [formGroup]="jobEditForm" *ngIf="active" class="form-inline" novalidate
                  (ngSubmit)="onSubmit(jobEditForm.value, jobEditForm.valid)">
                <div formGroupName="editMethod">
                    <!-- Centered Tabs -->
                    <ul class="nav nav-tabs nav-justified m-nav-tabs">
                                           </ul>

                    <section class="o-edit-modal__panel-body form-inline" >
                        <div *ngIf="jobEditForm.controls.editMethod.controls.type.value === EDIT_METHOD_TYPE.DASHBOARD"
                             class="o-patient-edit-form__patient-idx">
                            <app-report-buttons [jobMetaData]="jobMetaData" [showTokenMessage]="showTokenMessage"></app-report-buttons>
                        </div>


                        
                        <div *ngIf="jobEditForm.controls.editMethod.controls.type.value !== EDIT_METHOD_TYPE.DASHBOARD"
                             class="row o-edit-modal__log-message" formGroupName="editJob">
                            <label class="control-label col-sm-12" for="logMessage" i18n="label-edit-patient-id">
                                Please provide the reason for this change.
                            </label>
                            <div class="col-sm-12">
                            <textarea id="logMessage"
                                      formControlName="logMessage"
                                      class="form-control a-text-input" rows="5"
                                      required
                                      autocomplete="off">
                            </textarea>
                                <small [hidden]="jobEditForm.controls.editMethod.controls.editJob.controls.logMessage.valid"
                                       class="text-danger"
                                       i18n="patient-edit-log-message-validation">
                                    Minimum 20 characters
                                </small>
                            </div>
                        </div>
                        <button *ngIf="activeTab !== EDIT_METHOD_TYPE.DASHBOARD" type="submit"
                                class="btn btn-primary o-edit-modal__btn"
                                i18n="save"
                                [disabled]="!jobEditForm.valid || disableButton">
                            Save
                        </button>
                    </section>
                </div>
            </form>
        </div>

        <div *ngIf="successEditPatient" class="alert alert-info"
             i18n="patient-disable-success">
            Job ID was updated.
        </div>

    </modal-content>

   <modal-footer>
    </modal-footer>
</modal>

0 ответов

Другие вопросы по тегам