TypeError: undefined is not an object（评估'ctx.item.Street'）（NativeScript）

Question

I've attached a database that feeds JSON data to NativeScript .

I've gotten pretty far in terms of being able to pull the data from MongoDB , routing the data into array s, and then display the data in each HTML view of the app.

Issue :
The Item element is considered undefined yet when I console.log() the Item after doing the retrieve and assign function, I get the exact JSON element

{
  "_id": "5f3c82f37cdb5d6766c73217",
  "Street": "134 Marin Drive",
  "City": "ABSECON",
  "Zip": "08201"
}

JS

export class ItemDetailComponent implements OnInit {
    item: Item;
    
    constructor(
        private itemService: ItemService,
        private route: ActivatedRoute,
    ) {}

    ngOnInit(): void {
        const id = this.route.snapshot.params.id;
        this.itemService.getItem(id).then(item => {
              this.item = item;
              console.log(this.item);
        });
    }
}

HTML

<FlexboxLayout class="m-15">
    <Label class="h2" [text]="item.Street"></Label>
    <Label class="h2" [text]="item.City"></Label>
    <Label class="h2" [text]="item.Zip"></Label>
</FlexboxLayout>

https://imgur.com/a/JQeyz9t

Now I know for a fact that this code properly outputs and views the data yet I still get this error which would crash the non-emulated iPhone run of the app. So if anyone has advice on how to properly display this data it would be much much appreciated.

Answer 1

Wild turn of events. Took way too long but figured out a solution. You can add a? after the object variable name such as

<Label class="h2" [text]="item?.Street"></Label>

The?. (Elvis operator) means that the template field is optional and if undefined, the rest of the expression should be ignored.

Ref. https://forum.ionicframework.com/t/problems-with-json-processing-undefined-is-not-an-object/49428