java - 我想从数据库中填充数据并使用 Angular 前端和 Spring 引导后端将其放入下拉列表中

Question

我在 MySQL 中有一个数据库，我需要从数据库中获取数据并使用 AngularJS 填充到下拉列表中。我已经在我的 AngularJS 中为下拉列表尝试过这段代码，但它没有从数据库中获取数据并填充它。

 <div data-ng-init="getLocation1()">
                <b>Current Location:</b> <select id="cur_location">
                        <option value="">-- Select Current Locations --</option>
                        <option data-ng-repeat="location1 in location" 
value="{{location1.name}}">{{location1.name}}</option>
            </select><br>
                    </div> 

This is the code which is used to get all the locations.

// Get all location1
  getLocation1(): Promise<Location1[]> {
    return this.http.get(this.location1Url)
      .toPromise()
      .then(response => response.json() as Location1[])
      .catch(this.handleError);
  }

  getLocation1ByName(name: string): Promise<Location1[]> {
    const url = `findbyname/${name}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json() as Location1)
      .catch(this.handleError);
  }

Spring boot back end code is like this.

@GetMapping(value="/location1",  produces= MediaType.APPLICATION_JSON_VALUE)
        public List<Location> getAll() {
            List<Location> list = new ArrayList<>();
            Iterable<Location> location = repository.findAll();
            location.forEach(list::add);
            return list;
        }

        @PostMapping(value="/postlocation1")
        public Location postLocation(@RequestBody Location location) {
            repository.save(new Location(location.getName(),location.getX(),location.getY()));
            return location;
        }

对使用 Angular JS 填充数据有什么建议吗？

Answer 1

一步一个脚印，首先确保调用成功。


this.http.get(url).subscribe(res => console.log(res));


打开开发者面板，在Console 和Network 选项卡中，可以看到打印出你想要的任何东西。获取数据后，您可以将其分配给类属性。


数据;
this.http.get(url).subscribe(res => { this.data = res });


剩下的就是如何将数据与角度模板连接起来。