Картинка невидима, пока пользователь не начнет печатать в теме Angular Metronic - PullRequest
1 голос
/ 14 октября 2019

В теме Metronic у меня есть FormWizard с четырьмя вкладками. На второй вкладке я загружаю изображение из моей файловой системы в поле ввода и пытаюсь сохранить всю форму на четвертой вкладке. В случае, если я пропустил заполнение некоторых полей, и серверная часть выдает сообщение об ошибке, я возвращаюсь ко второй вкладке, и мое изображение исчезает, пока я не начну что-либо записывать в другое поле ввода рядом с вводом изображения. Когда я начинаю печатать, изображение сразу становится видимым.

В app.module.ts Я уже установил это: changeDetection: ChangeDetectionStrategy.Default

<!--begin: Form Wizard Step 2-->
<div class="kt-wizard-v4__content" data-ktwizard-type="step-content">
  <div class="kt-section kt-section--first">
    <div class="kt-wizard-v4__form">
      <div class="kt-portlet kt-portlet--bordered">
        <div class="kt-portlet__head">
          <div class="kt-portlet__head-label">
            <h3 class="kt-portlet__head-title">
               Galéria 
               <span class="required-field">*</span> 
               <i class="fa fa-info-circle kt-font-info"
                  data-toggle="kt-popover" title=""
                  data-content="And here's some amazing content. It's very engaging. Right?"
                  data-original-title="Popover title">
               </i>
            </h3>
          </div>
          <div class="kt-portlet__head-toolbar">
              <div class="kt-portlet__head-actions">
                <label for="file" title="Kép felviteléhez kattintson ide">
                   <input #file type="file" name="image" accept=".png, .jpg, .jpeg" id="file"
                        class="inputfile" (change)="onSelectFile($event)">
                    <button href="#" (click)="file.click()" class="btn btn-success btn-pill btn-wide">
                        képfeltöltés
                    </button>
                </label>
              </div>
          </div>
        </div>
    onSelectFile(event) {
        let element: HTMLElement = 
                     document.querySelector('input[type="file"]') as HTMLElement;
        element.click();
        if (event.target.files && event.target.files[0]) {
            const file = event.target.files[0];
            const reader = new FileReader();
            reader.readAsDataURL(file); // read file as data url

            reader.onload = (event) => { // called once readAsDataURL is completed
                this.addPicture(reader.result, file);
                this.changeDetectorRef.detectChanges();

            };
        }
    }

enter image description here

Нет сообщения об ошибке, только изображение невидимо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...