Typescript - Observableから属性にデータを設定する

Question

AngularFireDatabase.object（）呼び出しからObservable結果からデータを抽出し、それを他のスコープで後で使用する属性に設定しようとしています。

export class QuizzEditComponent implements OnInit { 
    private quizzRef: any; 
    private quizzObject: any; 
    private key: string; 

    constructor(private router: ActivatedRoute, private database: AngularFireDatabase) { 
    this.key = this.router.snapshot.paramMap.get('id'); 
    this.quizzRef = this.database.object(environment.firebase.databaseName+'/'+this.key); 
    this.quizzRef.valueChanges().forEach(line => { 
     this.quizzObject = line; 
     console.log(this.quizzObject); // this display the wanted object 
    }); 
    console.log(this.quizzObject); // This display undefined 
    } 
} 

観測がオブジェクトであるため、for let line of this.quizzItemが動作しないように私は別の反復を試してみました！

すべてのアイデア！

Answer 1

を試してみてくださいsecond console.log()ディスプレイは未定義です。

解決策は、this.quizzObjectを空のデータで初期化し、formBuilderを作成して(ngModel)を使用してテンプレートに管理することです。

コンポーネント：

init(){ 
    this.key = this.router.snapshot.paramMap.get('id'); 
    this.initObject(); 
    this.quizzRef = this.database.object(environment.firebase.databaseName+'/'+this.key); 
    this.quizzItem = this.quizzRef.valueChanges().subscribe(item => { 
    this.quizzObject = item; 
    }); 
} 

initObject(){ 
    this.quizzObject = []; 
    this.quizzObject.question = ""; 
    this.quizzObject.reponses = [{1: "", 2: "", 3: "", "correctAnswer": ""}]; 

    this.quizzForm = this.formBuilder.group({ 
    question: [this.quizzObject.question, Validators.required], 
    reponses: this.formBuilder.group({ 
     1: this.quizzObject.reponses[1], 
     2: this.quizzObject.reponses[2], 
     3: this.quizzObject.reponses[3], 
     correctAnswer: this.quizzObject.reponses.correctAnswer 
    }), 
    }); 
} 

テンプレート：

<form [formGroup]="quizzForm" (ngSubmit)="onSubmit()" role="form"> 
       <div class="form-group has-success"> 
       <div class="card bg-light mb-3"> 

        <div class="card-header"> 

        <label class="form-control-label" for="question">Question</label> 

       </div> 
       <div class="card-body"> 
        <input formControlName="question" type="text" class="form-control form-control-success" id="inputSuccess" [(ngModel)]="quizzObject.question" required> 
       </div> 
       </div> 
     </div> 

これはそれを行うための最善の方法はありませんが、それは私の問題（y）を解決

Answer 2

これは、コンポーネント内のデータ設定方法に関連する問題です。あなたのコードから、observableの最後の要素を得ることが期待される場合、それを行う1つの方法は、変数が設定された後に関数を呼び出すことです。このようにして、変数this.quizzObjectが呼び出された関数内で未定義でないことを確認します。この

private quizzObject=[]; 

、代わりのthis.quizzObject = line;などのデータを格納するための

export class QuizzEditComponent implements OnInit { 
    private quizzRef: any; 
    private quizzObject: any; 
    private key: string; 

    constructor(private router: ActivatedRoute, private database: AngularFireDatabase) { 
    this.key = this.router.snapshot.paramMap.get('id'); 
    this.quizzRef = this.database.object(environment.firebase.databaseName+'/'+this.key); 
    this.quizzRef.valueChanges().forEach(line => { 
     this.quizzObject = line; 
     console.log(this.quizzObject); // this display the wanted object 
     this.myFunction() 
    }); 

    myFunction(){ 
     //do all the computation here to the last element return by the observable 
     console.log(this.quizzObject); 
    } 

    } 
} 

Answer 3

使用pushはそれが理由です、（非同期スコープ）しばらく埋め、this.quizzObjectを皆さんありがとうthis.quizzObject.push(line);