javascript - 如何解决：使用无效数据调用函数 DocumentReference.set()。不支持的字段值：自定义 Map 对象

Question

我有一个应用程序可以自学 Angular 和 Firebase。对于这个应用程序，我希望能够创建一个角色。要创建一个角色，需要创建一个带有 2 个变量的角色界面。一个字符串和一个地图。您在表格中填写姓名和各种数字。但是，当我尝试将此角色添加到我的收藏时，我收到标题中提到的错误：

使用无效数据调用的函数 DocumentReference.set()。不支持的字段值：自定义 Map 对象

现在我在谷歌上搜索了很多关于这个并尝试了各种方法。我已经尝试将地图转换为对象，在没有 .set() 的情况下分配它，并且我已经阅读了 很多不完全是我的问题的帖子。我仍然尝试了一些，但没有任何效果。我已经阅读了 firebase 文档，但没有找到我需要的信息。下面的代码是我的表格。如果我删除所有提到的能力分数，它就会起作用。名字没有问题。欢迎任何帮助。我很困。

    <form (ngSubmit)="onSubmit()" >
    <div class="display-column">
        <div class="input-field center-name">
            <input class="space-text center-text" type="text" placeholder="Name" [(ngModel)]="character.name" name="name">
        </div>
        <div>
            <mat-grid-list cols="10" rowHeight="25px">

                <div *ngFor="let ability of ability_scores">
                    <mat-grid-tile [colspan]=5>
                        {{ability.display_name}}
                    </mat-grid-tile>
                    <mat-grid-tile [colspan]=2 >
                        <input 
                        name="ability.display_name" 
                        [ngModel]="character.ability_scores[ability.display_name]" 
                        (ngModelChange)="character.ability_scores.set(ability.value, $event)" 
                        type="number" placeholder={{ability.value}}
                        class="space-text center-text"
                        >
                    </mat-grid-tile>
                </div>
            </mat-grid-list>
        </div>
        <div class="center-text">
            <input type="submit" value="Create" class="btn">
        </div>
    </div>
</form>

这是我的 create-character.ts 的重要部分

  character: Character = {
    name: '',
    ability_scores: new Map<string, number>()
  } 

  ability_scores: AbilityScore[] = [
    { display_name: "strength", value: 10, modifier: 0 },
    { display_name: "dexterity", value: 10, modifier: 0 },
    { display_name: "constitution", value: 10, modifier: 0 },
    { display_name: "intelligence", value: 10, modifier: 0 },
    { display_name: "wisdom", value: 10, modifier: 0 },
    { display_name: "charisma", value: 10, modifier: 0 }
  ]

  onSubmit(){
    this.sendData();
  }

  constructor(
    private characterService: CharacterService,
    private appComponent: AppComponent,
    ) {}

  ngOnInit() {
    this.ability_scores.forEach(element => {
      this.character.ability_scores.set(element.display_name, 10);
    })
  }

人物界面：

export interface Character {
    name: string;
    ability_scores: Map<string, number>;
}

标签： javascriptangularfirebasegoogle-cloud-firestore