Как решить: функция DocumentReference.set () вызвана с неверными данными. Неподдерживаемое значение поля: пользовательский объект карты

Question

У меня есть приложение, чтобы научить себя Angular и Firebase. Для этого приложения я хочу иметь возможность создавать персонажа. Для создания персонажа создается символьный интерфейс с 2 переменными. строка и карта. Вы вводите имя и различные номера в форме. Однако, когда я пытаюсь добавить этот символ в свою коллекцию, я получаю сообщение об ошибке, указанное в заголовке:

Функция DocumentReference.set () вызвана с недопустимыми данными. Неподдерживаемое значение поля: пользовательский объект карты

Теперь я много гуглюл по этому поводу и пробовал различные методы. Я попытался преобразовать карту в объекты, чтобы назначить ее без .set (), и я прочитал a лот из сообщений , которые не совсем моя проблема , Я все еще пробовал и ничего не получалось. Я прочитал документацию 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>;
}