Question

我想实现从剩余API获取列表的Angular示例。我尝试过：

SQL查询：

    @Override
    public Iterable<Merchants> findAll() {
        String hql = "select e from " + Merchants.class.getName() + " e";
        TypedQuery<Merchants> query = entityManager.createQuery(hql, Merchants.class);
        List<Merchants> merchants = query.getResultList();
        return merchants;
    }

其他控制器：

@RestController
@RequestMapping("/merchants")
public class MerchantController {

    @GetMapping("/list")
    public Iterable<Merchants> getMerchantsList() {
        return merchantRepository
                .findAll();
    }
}

服务：

@Injectable({
  providedIn: 'root'
})
export class MerchantService {

  constructor(private http: HttpClient) {
  }    
  getList() {
    return this.http.get("...../api/merchants/list");
  }
}

端子等级：

export class Terminal {
  constructor(
    public id: string,
    public enabled: string,
    public name: string,
    public merchant_id: number,
    public currency: string,
    public mode: string,
    public expires_at: Date 
  ) {}
}

商人等级：

export class Merchant {
  constructor(
    public id: string,
    public name: string,
    public state_raw: string,
    public users: string,
  ) {}
}

组件：

@Component({
  selector: 'app-terminal',
  templateUrl: './terminal.component.html',
  styleUrls: ['./terminal.component.scss']
})
export class TerminalComponent implements OnInit {

  constructor(private terminalService: TerminalService,
              private merchantService: MerchantService,
              private router: Router,
              private route: ActivatedRoute) {
  } 

  merchants: Merchant[];

  ngOnInit() {   
    this.merchantService.getList()
      .subscribe(value => {
        if (value != null) {
          this.merchants = value;
        }
      });
    }
  }

HTML表单：

<form class="grid-wrapper" #f="ngForm">
  <div *ngIf="edit" class="form-group id">
    <label for="id">Terminal Name</label>
    <input id="id" type="text" name="id" class="form-control" disabled [(ngModel)]="terminal.id">
  </div>

  <div class="form-group name">
    <label for="name">Terminal name</label>
    <input id="name" type="text" name="name" class="form-control" required [(ngModel)]="terminal.name">
  </div>

  <div class="form-group type">
    <div class="input-group-prepend">
      <label for="type">Merchant</label>
    </div>
    <select class="custom-select" name="type" [(ngModel)]="terminal.merchant_id" id="merchant_id" required>
      <option selected></option>
      <option [value]="type" *ngFor="let merchant of merchants">{{name}}</option>
    </select>
  </div>

  <div class="btn-row">
    <button class="btn btn-primary" [disabled]="f.invalid" (click)="submit()">Submit</button>
  </div>
</form>

当我加载网页时，下拉菜单中包含3个项目。您知道我如何在下拉菜单项中显示商家名称，但如何以id的形式将商家merchant_id提交给表单？

我收到此异常：

19:21:34,532 WARN  [org.springframework.web.servlet.mvc.support.DefaultHandlerExceptionResolver] (default task-1) Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type `java.lang.Integer` from String "undefined": not a valid Integer value; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type `java.lang.Integer` from String "undefined": not a valid Integer value
 at [Source: (PushbackInputStream); line: 1, column: 56] (through reference chain: org.datalis.admin.backend.restapi.dto.TerminalDTO["merchant_id"])]

Answer 1

就是那样做：

  <option *ngFor="let merchant of merchants" [value]="merchant.id" >{{ merchant.name }}</option>

option元素的value属性通过表单发送。

用列表填充下拉列表

1 个答案: