通过Angular使用JSON字符串数组填充html选择

时间:2017-11-15 09:47:58

标签: html json angular select angular5

我想将jsonArray转换为angular中的字符串,然后在html中将其显示为select(下拉选取器)。

JSON Url看起来像这样:

[
    "100 - BISCUIT - 546156",
    "252 - CHOCO - 185268",
    "131 - CANDY - 478215"
]

my.service.ts:

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs';

@Injectable()
export class MyService {

    //Json Url
    private jsonUrl = 'localhost:8080/jsonurl';

    constructor(private http: Http) {
    }

    public getContentFromApi() {
        return this.http.get(this.jsonUrl);
    }
 }

我在store.component.ts和app.component文件中导入了服务

import { Component, OnInit } from '@angular/core';
import { MyService } from '../../services/my.service'

@Component({
  selector: 'app-store',
  templateUrl: './store.component.html',
  styleUrls: ['./store.component.css'],
  providers: [MyService]
})

export class StoreComponent implements OnInit {
  selectedValue: any;
  storeItems: any;
  si: myService;



  constructor(){ }

  ngOnInit() {
    this.storeItems = this.si.getContentFromApi;
  }


  getStoreItems() {
    return this.storeItems;
   }


}

store.component.html

<div class="alignment">
  <p class="lev">Store Items: 
    <select [(ngModel)]="selectedValue"><option *ngFor="let s of storeitems" [ngValue]="s">{{storeitems}}</option></select></p>
</div>

据我所知,我的getcontentFromApi方法不正确,并且绑定到html选项不起作用。

0 个答案:

没有答案