как отобразить значение JSON в группе радио - PullRequest
Новая
       12

как отобразить значение JSON в группе радио

0 голосов
/ 28 февраля 2019

Я хочу загрузить локальные данные JSON в опцию радиогруппы, это локальные данные JSON с информацией о городах.

json 

{
    "stations": {
        "station": [
            {
                "_name": "Khasab Port",
                "_ar_name": "ميناء خصب",
                "_cccc": "OOKP",
                "_city_forecast_name": "Khasab_Port",
                "_metar_avail": "true",
                "_iii": "41240",
                "_lat": "26.2105",
                "_lon": "56.244",
                "_elev": "4.0",
            },          {
            "_name": "Khasab Airport",
            "_ar_name": "مطار خصب",
            "_cccc": "OOKB",
            "_city_forecast_name": "Khassab_Airport",
            "_metar_avail": "true",
            "_iii": "41241",
            "_lat": "26.161722",
            "_lon": "56.23672",
            "_elev": "29.0",
            "_image": "KhasabAirport.jpg"
        },
        {
            "_name": "Diba",
            "_ar_name": "دبا",
            "_cccc": "OODB",
            "_city_forecast_name": "Dibba",
            "_metar_avail": "true",
            "_iii": "41242",
            "_lat": "25.615627",
            "_lon": "56.247322",
            "_elev": "10.0",
            "_image": "Diba.jpg"
        },

        ]
    }
}

как я могу загрузить этот список json в радиогруппу?

пример, подобный этому 

<ion-item>
  <ion-label>{{_name}}</ion-label>
  <ion-radio slot="start" value="{{_lat}},{{_lon}}"></ion-radio>
</ion-item>

Есть идеи, пожалуйста, с кодом?Я использую ionic4 и angualr

1 Ответ

0 голосов
/ 28 февраля 2019

Я считаю, что вы ищете ионно-радиогруппу и петлю * ngFor . 

<ion-list>
  <ion-radio-group>
    <ion-item *ngFor="let station of stations" >
      <ion-label>{{ station._name }}</ion-label>
      <ion-radio slot="start" [value]="station._lat + ',' + station._lon"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

Где станции - это свойство класса вашего компонента, в которое вы загружаете значения json из Службы. 

@Component({
    selector: 'app-component',
    templateUrl: 'component.html',
    styleUrls: ['component.css']
})
export class AppComponent implements OnInit {

    public stations;

    constructor(
        private _assetsService : AssetsService 
    ) { }

   ngOnInit(){
       this._assetsService.getStations().subscribe(
          data => this.stations = data.stations.station
       );
   }

}

И вы можете загрузить данные JSON, читая локальный файл через HttpClient. 

@Injectable()
export class AssetsService {

   constructor(private http: HttpClient) { }

    public getStations(): Observable<any> {
        return this.http.get("./assets/stations.json")
    }
}
...