Question

我是angular的新手，正在从事angular 6 / Spring Boot 2项目。我有这个TypeScript类：

export class Partner {

  constructor
  (
    public id: number,
    public name: string,
    public email: string,
    public phone: string,
    public address: string,
    public picture: string,
    public latitude: number,
    public longitude: number,
    public horary: string,
    public comment: string,
    public specialOffer: boolean,
    public offer: string,
    public location: Location,
    public tripAdvisorLink: string,
    public type: Type,
    public country: string,
    public hotWords: HotWord[],
  ) {}
}

例如，我想创建一个合作伙伴，我需要选择一个Location。

在我的HTML中，我有：

<div class="form-group">
  <label for="partner_location" class="form-control-label" required>Choose location <span class="text-danger">*</span></label>
  <select id="partner_location" class="form-control" [(ngModel)]="partner.location" name="partner_location">
    <option *ngFor="let location of locations" [value]="location">{{location.name}}</option>
  </select>
</div>

在我的创建合作伙伴组件中：

export class CreatePartnerComponent implements OnInit {

  partner = new Partner(undefined, '', '', '', '', '', undefined, undefined, '', '', false, '', null, '', null, '', null);
  types: Type[];
  locations: Location[];
  message = '';
  error = '';

  constructor(
    private getPartnersService: GetPartnersService,
    private getTypesService: GetTypesService,
    private getLocationService: GetLocationsService
  ) {}

  ngOnInit() {
    this.loadInitialData();
  }

  loadInitialData() {
    this.getLocationService.getLocations().subscribe(locations => this.locations = locations);
    this.getTypesService.getTypes().subscribe(types => this.types = types);
  }
  onSubmit() {
    console.log('Partner = ' + JSON.stringify(this.partner));
    this.getPartnersService.createPartner(this.partner)
      .subscribe(partner => {
        if (partner.id !== undefined) {
          this.showMessage();
          window.scrollTo(0, 0);
        } else {
          this.showError();
          window.scrollTo(0, 0);
        }
      });
  }

这是我的创建合作伙伴方法：

const httpOptions = { headers: new HttpHeaders({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'}) };

  createPartner(partner: Partner): Observable<Partner> {
    const url = `${baseUrl}/partner/add`;
    return this.http.post<Partner>(url, partner, httpOptions)
      .pipe(catchError(HandleError.handleError<Partner>('createPartner')));
  }

我在Spring中遇到一个错误，说他不能从Location创建[Object object]。我的console.log('Partner = ' + JSON.stringify(this.partner));方法会显示：

Partner = {"name":"Test production","email":"v.solodoukhin@outlook.com","phone":"32489836733","address":"brolekestraat","picture":"","latitude":"55","longitude":"1.23424324","horary":"9 - 18 every day","comment":"aaaaaaaaaaaaaaaaaaaaaaaaaaaaa","specialOffer":true,"offer":"5%","location":"[object Object]","tripAdvisorLink":"http://brol.be","type":"[object Object]","country":"Belgium","hotWords":null}

据我了解，http发布请求发送了location : [object Object]。...

如何进行这项工作？

Answer 1

数据绑定将partner.location设置为字符串，因为option值与[value]绑定。您应该使用[ngValue]将option值绑定到对象：

<select id="partner_location" class="form-control" [(ngModel)]="partner.location" name="partner_location">
  <option *ngFor="let location of locations" [ngValue]="location">{{location.name}}</option>
</select>

来自Angular documentation：

如果您的选项值为简单字符串，则可以绑定到普通选项的value属性。如果您的期权价值恰好是对象（并且您希望将选择内容保存为表单中的对象），请改用ngValue。

Answer 2

问题在于您绑定选项的值。正确的绑定应如下所示：

<option *ngFor="let location of locations" [ngValue]="location">{{location.name}}</option>

检查我的StackBlitz使其正常工作：https://stackblitz.com/edit/angular-pckh2b

Answer 3

[Object object]表示该文件未以可读方式编码。您必须对其进行编码和解码。

角度发布请求发送[object Object]

3 个答案: