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

this.quizzObject.push(line); 너희들, this.quizzObject가 잠시 (비동기 범위) 후 작성, 이것은 왜이다 감사하십시오 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> 

이 그것을 할 수있는 가장 좋은 방법은 아니지만이

Answer 2

이것은 단순히 구성 요소 내부에서 데이터를 설정하는 방법과 관련된 문제입니다. 코드에서 observable의 마지막 요소를 얻으 려한다면, 변수를 설정 한 후에 함수를 호출하는 것이 좋습니다. 이 방법을 사용하면 변수 this.quizzObject이 호출 된 함수 내에서 정의되지 않았는지 확인할 수 있습니다.

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이

private quizzObject=[]; 

같은 데이터를 저장하고 대신 this.quizzObject = line;는