Typescript - Daten von Observable auf ein Attribut setzen

Question

Ich versuche, Daten aus einem Observable-Ergebnis von AngularFireDatabase.object() -Aufruf zu extrahieren und es auf ein Attribut festzulegen, um es später in anderen Bereichen zu verwenden.

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 
    } 
} 

Ich habe versucht, verschiedene Iteration wie for let line of this.quizzItem funktioniert nicht, da beobachtbare ein Objekt!

Irgendwelche Ideen!

Answer 1

euch danken, this.quizzObject es nach einer gewissen Zeit (Async Scope) gefüllt, deshalb sind die zweite console.log() Anzeige undefiniert.

Die Lösung besteht darin, this.quizzObject durch leere Daten zu initialisieren und einen formBuilder zu erstellen und dann in die Vorlage zu verwalten, indem (ngModel) verwendet wird.

Komponente:

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 
    }), 
    }); 
} 

Vorlage:

<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> 

Dies ist nicht der beste Weg, es zu tun, aber es gelöst mein Problem (y)

Answer 2

Dies ist einfach ein Problem im Zusammenhang mit der Einstellung Ihrer Daten in Ihrer Komponente. Wenn Sie von Ihrem Code erwarten, dass Sie das letzte Element Ihrer Observablen erhalten, können Sie eine Funktion aufrufen, nachdem Ihre Variable festgelegt wurde. Auf diese Weise stellen Sie sicher, dass Ihre Variable this.quizzObject in Ihrer aufgerufenen Funktion nicht undefiniert ist.

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

Verwenden push zum Speichern von Daten wie diese

private quizzObject=[]; 

und statt this.quizzObject = line; versuchen this.quizzObject.push(line);