"Property '...' doesn't exist on type FirebaseObjectObservable<any>" error when working with data received with @Input

Question

I have a chunk of data being delivered to a child component through @Input that console.logs but when I go to work with the data it throws an error saying the objects I'm trying to access don't exist on type FirebaseObjectObservable<any>.

Here's how the chunk of data is structured

"questions" : {
        "question01"    : {
            "id"        : "an ID",
            "name"      : "a name",
            "question"  : "a question",
            "answers"   : {
                "answer01"  : {
                    "answer"    : "some answer",
                    "id"        : "an ID"
                },
                "answer02"  : {
                    "answer"    : "another answer",
                    "id"        : "an ID"
                }
            }
        },
        "question02"    : {....},
        "question03"    : {....}
    }

Inside the child component it's being delivered as this

@Input('busImageQuesI')
questions:  FirebaseObjectObservable<any>; // console.logs the questions showing they made it safely to the component.

This child component will be used in other parent components and has it's own child component to populate depending on which parent component it's being called in. So far I figured I'd use if statements to determine which sets of data gets displayed. So far it looks like this

expbTrigger: boolean =  false;
rebbTrigger: boolean =  false;
newbTrigger: boolean =  false;

ngOnInit() {

    var myLocation = window.location.pathname;


    if (myLocation.includes('expand')){
        this.expbTrigger = true;

    } else if (myLocation.includes('recreate')){
        this.rebbTrigger = true;

    } else if (myLocation.includes('new-business')){
        this.newbTrigger = true;
    }

    console.log(this.expbTrigger, this.rebbTrigger, this.newbTrigger);
}

I'm using that to toggle other elements in the template like this

<multiple-choice-radio *ngIf="expbTrigger"></multiple-choice-radio>
<multiple-choice-radio *ngIf="rebbTrigger"></multiple-choice-radio>
<multiple-choice-radio *ngIf="newbTrigger"></multiple-choice-radio>

I'm doing this to send the questions I want based on the parent component because none of them are exclusive to just one part, yet they're not all used in everything, so I figured I'd just set them manually and use *ngIf to turn them on and off when appropriate.

the questions object received by the @Input has 3 questions in it. if expbTrigger = true I want to use questions 1 and 2. If rebbTrigger = true I want to use question 3. I figured this code would work

questionA:  FirebaseObjectObservable<any>;
questionB:  FirebaseObjectObservable<any>;

ngOnChanges(){
    if(this.expbTrigger = true){
        this.questionA = this.questions.question01;
        this.questionB = this.questions.question02;
    } else if(this.rebbTrigger = true){
        this.questionA = this.questions.question03;
        this.questionB = null;
    }
}

but I get this error

Property 'question01' does not exist on type 'FirebaseObjectObservable<any>'

and it says the same for questions 2 and 3. When I comment out the code and do console.log(questions) it logs it and shows all the questions inside of it. I tried moving it into an ngAfterViewInit as well and got the same error. Every example I see is pretty much 1 single tier of data so it's hard to tell what I'm doing wrong in regards to retrieving nested bodies of data. Can anyone help?

Answer 1

I think you better use an object instead of an observable to keep the data. But even in that case you will get an error because you will have to predefine interface to match the data you are going to receive. If you don't have it you can access the property like this: this.questions['question01'];