Angular2 ng約束の範囲内で変更された場合は更新されません

Question

私たちのコンポーネントでは、アップロードフォームと確認メッセージがあります。

ファイルform.component.html

<div class="tab-pane active" id="upload"> 
    <div id="loader-wrapper" *ngIf="isUploadLoaderVisible"> 
     <div id="loader"></div> 
     <p class="text-center">Uploading</p> 
    </div> 
    <div *ngIf="!isFileSubmitted"> 
     <form class="form-horizontal" [formGroup]="fileUploadForm" (ngSubmit)="onSubmit()"> 
     <input type="file" id="file" formControlName="file" (change)="fileChangeEvent($event)"> 
     </form> 
    </div> 
    <div *ngIf="isFileSubmitted"> 
     <p class="alert alert-success"> 
      <i class="fa fa-check"></i> 
      Thanks for upload. 
     </p> 
     <p><a class="btn btn-default" [routerLink]="['..']">Back</a></p> 
    </div> 
</div> 

ファイルform.component.ts

import { Component, OnInit, Inject } from '@angular/core'; 
import { 
    FormGroup, 
    Validators, 
    FormBuilder, 
    FormControl 
} from '@angular/forms'; 
import { AngularFire, FirebaseApp } from 'angularfire2'; 

@Component({ 
    selector: 'app-file-form', 
    templateUrl: './file-form.component.html', 
    styleUrls: ['./file-form.component.css'] 
}) 
export class SfFileFormComponent implements OnInit { 
    // States togglers 
    isFileSubmitted: boolean = false; 
    isUploadLoaderVisible: boolean = false; 

    // Declarations 
    fileUploadForm: FormGroup; 
    uploadedFile; 
    isFileValid: boolean = false; 
    uploadedCorrectedFilename: string; 

    constructor(private formBuilder: FormBuilder, 
    public af: AngularFire, 
    @Inject(FirebaseApp) private firebaseApp: firebase.app.App) { } 

    ngOnInit() { 
    this.initForm(); 
    } 

    private initForm() { 
    let file = ''; 

    this.fileUploadForm = this.formBuilder.group({ 
     file: file 
    }); 
    } 

    fileChangeEvent(fileInput: any) { 
    this.uploadedFile = fileInput.target.files; 
    let fileType: string = _.toLower(this.uploadedFile[0].type); 

    if (fileType === 'application/pdf') { 
     this.isFileValid = true; 
     console.log('File is valid. Click to upload file', this.uploadedFile[0]); 
    } else { 
     this.isFileValid = false; 
     this.fileUploadForm.reset(); 
     console.log('File is invalid. Cancel Upload and block form submission', this.uploadedFile[0]); 
    } 
    } 

    onSubmit() { 
    if (this.uploadedFile.length === 1) { 
     let file: FileList = this.uploadedFile[0]; 
     console.log('Uploading File', file); 

     this.isUploadLoaderVisible = true; 

     // Upload to Firebase 
     this.firebaseApp 
     .storage() 
     .ref() 
     .child('filesdummy/' + file.name) 
      .put(file) 
      .then((snapshot) => { 
       console.log('Uploaded a blob or file!'); 

       this.isUploadLoaderVisible = false; 
       this.isFileSubmitted = true; 
       console.log('isFileSubmitted',this.isFileSubmitted); 
       console.log('isUploadLoaderVisible', this.isUploadLoaderVisible); 
      }); 
    } 
    } 

} 

形で提出し、我々は我々のトリガはブール設定ローダーを表示します。それは完璧かつ瞬時に動作します。

コードは私たちの場合Firebaseに提出し、約束が解決したらローダーisUploadLoaderVisibleをfalseに、確認メッセージの1つをtrueに変更します。isFileSubmittedをtrueに設定します。

アップロード作品やコンソールで、私は正しく変更ブールを見ることができますし、すぐに：

ブロブをアップロードするか、ファイル！

しかし、ブラウザ上で（私はChromeを使用）isUploadLoaderVisible偽真

をisFileSubmitted

は、ビューは、 "切り替え" されていないとngIfは実際にisFileSubmittedは私だけ場合はtrueになりました見ているようですウィンドウ/タブを変更して、非常に大きな遅延（30〜34秒）の前後に戻ってきます。 私はthen()約束結果から直接ブール状態を変更するため、このような長い時間前に、コンポーネントに「合格」ではない、私のトリガーの新しいブール値として ...

は、多分それはですか？私は私とは違った方法でブール値をどのように変更するのか分かりません。

注：アップロードに時間がかかることはありません。アップロードが完了するまで約束が解決されないので、Uploadedコンソールログは表示されません。私のテストファイルは現在50kbです。

ご存知ですか？ここで

Answer 1

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

export class SfFileFormComponent implements OnInit { 
    constructor(private formBuilder: FormBuilder, 
     public af: AngularFire, 
     @Inject(FirebaseApp) private firebaseApp: firebase.app.App, 
     private ref: ChangeDetectorRef) { } 
    } 

    onSubmit() { 
     if (this.uploadedFile.length === 1) { 
      let file: FileList = this.uploadedFile[0]; 
      console.log('Uploading File', file); 

      this.isUploadLoaderVisible = true; 

      // Upload to Firebase 
      this.firebaseApp 
      .storage() 
      .ref() 
      .child('filesdummy/' + file.name) 
       .put(file) 
       .then((snapshot) => { 
        console.log('Uploaded a blob or file!'); 

        this.isUploadLoaderVisible = false; 
        this.isFileSubmitted = true; 
        this.ref.detectChanges(); 
        console.log('isFileSubmitted',this.isFileSubmitted); 
        console.log('isUploadLoaderVisible', this.isUploadLoaderVisible); 
       }); 
     } 
    } 

} 

は良い答えである：ここ triggering-angular2-change-detection-manually

さらに詳しい情報：ChangeDetectorRef