Angular ng-for or ng-repeat to print tabs

Question

I would like to print tabs in HTML using angular js with below data and expected output format. Could you guys please help me out with solution.I can only choose 1 radio button from all the tabs and send the same to m service.

MY data is

{
  "parkdata": {
    "0": {
      "name": "Alexandra Park",
      "code": "ALP",
      "city": "London"
    },
    "1": {
      "name": "Barking Park",
      "code": "BAP",
      "city": "London"
    },
    "2": {
      "name": "Battersea Park",
      "code": "BTP",
      "city": "London"
    },
    "3": {
      "name": "Gunnersbury Park",
      "code": "GBP",
      "city": "Paris"
    },
    "4": {
      "name": "Goodmayes Park",
      "code": "GMP",
      "city": "Paris"
    },
    "5": {
      "name": "Greenwich Park",
      "code": "GWP",
      "city": "Paris"
    },
    "6": {
      "name": "Green Park",
      "code": "GRP",
      "city": "Japan"
    },
    "7": {
      "name": "Good Park",
      "code": "GDP",
      "city": "Japan"
    },
    "8": {
      "name": "Gun Park",
      "code": "GNP",
      "city": "Japan"
    }
  }
}

Please help

Answer 1

 ----------

   >Please try this code it is not same but with help of it you will get 
  proper  drop down list then you can change it as per your json data. you 
  just run this 
   cod your list will work.

> app.component.ts.............................

import { Component } from "@angular/core";

import { Item } from "../app/item";
import { ITEMS } from "../app/mock-data";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "app";
 radioSel: any;
 radioSelected: string;
 radioSelectedString: string;
 itemsList: Item[] = ITEMS;

constructor() {
this.itemsList = ITEMS;
this.radioSelected = "item_3";
this.getSelecteditem();
  }

  getSelecteditem() {
this.radioSel = ITEMS.find((Item) => Item.value === this.radioSelected);
this.radioSelectedString = JSON.stringify(this.radioSel);
 }

 onItemChange(item) {
this.getSelecteditem();
  }
}


    enter code here



> app.module.ts.............................

 import { BrowserModule } from "@angular/platform-browser";
 import { NgModule } from "@angular/core";
 import { FormsModule } from "@angular/forms";
 import { AppComponent } from "./app.component";

@NgModule({
   declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
   providers: [],
   bootstrap: [AppComponent]
 })
export class AppModule {}

>then you create two more files 
> item.ts 
>  mock-data.ts 
> in app folder


 > item.ts..............................................................

export class Item {
 name: string;
 value: string;
}

   >mock-data.ts.....................


 import { Item } from "./item";

 export const ITEMS: Item[] = [
 {
  name: "Item 1",
  value: "item_1"
  },
  {
  name: "Item 2",
  value: "item_2"
  },
  {
  name: "Item 3",
  value: "item_3"
   },
  {
  name: "Item 4",
  value: "item_4"
  },
  {
   name: "Item 5",
  value: "item_5"
  }
  ];


 app.component.html.............................


<!--The content below is only a placeholder and can be replaced.-->
<div class="text-center mt-5">
<h4>Selected value is {{radioSel.name}}</h4>

  <div>
  <ul class="list-group">
  <li class="list-group-item" *ngFor="let item of itemsList">
    <input
      type="radio"
      [(ngModel)]="radioSelected"
      name="list_name"
      value="{{item.value}}"
      (change)="onItemChange(item)"
    />
    {{item.name}} 
  </li>
  </ul>
  </div>

 <h5>{{radioSelectedString}}</h5> 
</div>
 --------------- or consider this link.......... 
    https://www.freakyjolly.com/how-to-show-radio-input-listing-in- 
       angular-6/#.X_wUi3UzZNi