Pulling Data From database and displaying it with radio component for inventory

I am trying to create an inventory page for my simple text based rpg game.What im trying to do is after pulling data from databaseb,how do i display them correctly on html page.I mean users should be able to select their items in their inventory,and use them with a button.

But because i dont know which user has what and how many quantity,how do i add radio components? If user has apple for example i should display apple radio component if they dont i shouldn’t.

this.invData = this.fire.authState.switchMap(auth => this.db.object(`profile/${auth.uid}/inventory`).valueChanges());
    this.invData.subscribe(invdata =>{
    this.invData=invdata      
    console.log(this.invData);
});

For Example:

invData.apple //returns quantity of apple

I am thinking about radio component for this but maybe select is better.Do you guys have suggestions about which components should i use ?
thanks