Из mat-select сохранить данные в базу данных MongoDB

Question

У меня есть сборник игрока и сборные команды. Я хочу добавить нагрузку игроков в команды.

в HTML в команде создания, где я загружаю данные от игроков, и пользователь может выбрать загрузку игроков:

<mat-form-field>
  <mat-select placeholder="Goalkeepers" formControlName="goalkeeper">
    <mat-option *ngFor="let player of goalkeepers" [value]="player">
      {{player.name}} {{player.surename}} ({{player.price}}M)
    </mat-option>
  </mat-select>
  <mat-error *ngIf="form.get('goalkeeper').invalid">Pleasse enter a goalkeeper.</mat-error>
</mat-form-field>

А в user.component.ts я сохраняю данные. Вот данные загрузки игроков в HTML:

 this.playersService.getPlayersForTeam();
    this.playersSub = this.playersService
    .getPlayerUpdateListener()
    .subscribe((playerData: {players: Player[]}) => {
      this.players = playerData.players;
    });

А вот и сохранение данных в базе данных:

onSaveUserTeam() {
      this.userTeamsService.addUserTeam(
        this.form.value.name,
        this.form.value.goalkeeper,
        this.form.value.goalkeeper_sub,
        this.form.value.midfielder1,
          ... etc ...
      );

Я отправил данные в базу данных без ошибок. Когда у меня были только эти входы:

<input matInput type="text" formControlName="goalkeeper" placeholder="UserTeam goalkeeper">
  <mat-error *ngIf="form.get('goalkeeper').invalid">Please enter a userTeam goalkeeper.</mat-error>
</mat-form-field>

Так что, как и текст, когда я что-то писал для ввода, а затем отправлял в базу данных, все было хорошо. Но теперь, когда у меня есть mat-select с игроками из коллекции игроков, я получаю в базу что-то вроде этого:

{
  _id: ObjectId('5c7ecdd75c09e23d903f1bb9')
  name: "Test"
  goalkeeper: "[object Object]"
  goalkeeper_sub: "[object Object]"
}

И это проблема, потому что мне нужно иметь такую ​​же конкретную информацию об игроке, как playerID, чтобы использовать ее позже для команды редактирования и т.д. ... Что я делаю не так при передаче данных в базу данных? Спасибо за помощь!

Answer 1

Похоже, что Angular сериализует объекты не так, как предполагалось.Возможно, вы передаете неправильные значения из формы в этот метод.

Я бы предложил вам изменить метод addUserTeam, чтобы он принимал один объект, который необходимо загрузить, и полностью удалял данные формы.

addUserTeam(userTeam: UserTeam) {
    this.http.post('http://localhost:3000/api/userteams', userTeam);
}

Где UserTeam - это класс / интерфейс, который содержит все свойства, прикрепленные на скриншоте.