上傳的Angular7中的圖片在上傳后不顯示-有解無憂

我已經撰寫了下面的代碼，它正在運行，沒有編譯錯誤。我成功地在控制臺中列印了上傳的影像。但是剛剛上傳圖片后，它在頁面中不可見。我需要單擊螢屏上的任意位置，然后在螢屏中預覽影像。

  onFileChange(event) {
    if (event.target.files && event.target.files[0]) {
     var filesAmount = event.target.files.length;
      for (let i = 0; i < filesAmount; i  ) {

        var reader = new FileReader();
        reader.readAsDataURL(event.target.files[i]); 
        reader.onload = (event: any) => {
            this.images.push(event.target.result);           
        };
      }
    }
  }

 <form [formGroup]="formGroup" (ngSubmit)="submit()">
      <section>
        <h3 class="fs-20 fw-600 text-color9 mb-30">
          Step 4: Sample information
        </h3>
        <div class="samples d-flex flex-wrap mb-5">
          <div class="sample-item mb-3 mb-lg-0">
            <div
              class="upload-box rounded-4 bg-white position-relative d-flex justify-content-center align-items-center flex-column overflow-hidden"
            >
              <input
                id="file"
                type="file"
                class="form-control"
                accept="image/*"
                (change)="onFileChange($event)"
              />

              <i class="icon-plus fs-36 text-color4 mb-2"></i>
              <h6 class="fs-18 fw-500 text-color4 mb-0">Upload image</h6>
            </div>
          </div>
          <div class="sample-item mb-3 mb-lg-0">
            <div class="image-box">
              <img class="rounded-4" *ngFor="let url of images" [src]="url" />
              <br />
            </div>
          </div>
        </div>

//other formgoup inputs will be written here

        <div class="action-button pb-3">
          <hr />
          <div class="text-end">
            <button
              type="button"
              class="btn btn-sm btn-primary-outline me-3"
              routerLink="/order/create-order"
              [queryParams]="{ id: orderObject?.orderID }"
            >
              Back
            </button>
            <button type="submit" class="btn btn-sm btn-primary">
              Continue
            </button>
          </div>
        </div>
      </section>
    </form>

每次我單擊this.image插入影像中的選擇檔案時。如果我嘗試運行console.log(this.images) 它也會被列印出來。但它并沒有通過這個陣列立即呈現在螢屏this.images上*ngFor

當此 ts 代碼在https://stackblitz.com/edit/angular-file-upload-preview?file=app/app.component.ts中運行時，它運行良好。選擇檔案后，影像就在螢屏上可見。

請幫助我了解這種行為背后的原因。

uj5u.com熱心網友回復：

您可能需要再次運行角度回圈。嘗試

 constructor(
    private cdr: ChangeDetectorRef
  ) {}

 reader.onload = (event: any) => {
      this.images.push(event.target.result);  
      this.cdr.detectChanges();         
  };

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/518187.html

標籤：javascript有角度的文件阅读器

上一篇：無法讀取未定義的屬性（讀取“nativeElement”）

下一篇：升級基礎ngx正在破壞UI