从 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>

就像文本一样，当我写一些东西输入然后发送到数据库时，一切都很好。但是现在，当我从玩家集合中选择玩家时，我会在数据库中输入如下内容：

{
  _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 是一个类/接口，其中包含屏幕截图中附加的所有属性。