تایپاسکریپت - درخواست پست انگولار [object Object] ارسال میکند

من در 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[],
  ) {}
}

پس، به عنوان مثال من میخواهم یک شریک ایجاد کنم و نیاز دارم یک مکان را انتخاب کنم.

در 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":"[email ","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 POST ارسال میکند location : [object Object]....

چطور میتوان این کار را انجام داد؟

پاسخ شماره ۱

اتصال داده 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:

اگر مقادیر گزینههای شما رشتههای ساده هستند، میتوانید به خصوصیت معمولی value در گزینه وصل شوید. اگر مقادیر گزینههای شما اشیاء هستند (و میخواهید انتخاب را بهعنوان یک شیء در فرم خود ذخیره کنید)، به جای آن از ngValue استفاده کنید.

پاسخ شماره ۲

مشکل این بود که مقدار گزینه را کجا متصل میکنید. اتصال صحیح باید به صورت زیر باشد:

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

برای مشاهده عملکرد آن، StackBlitz من را بررسی کنید: https://stackblitz.com/edit/angular-pckh2b