我尝试通过服务将数据从一个组件获取到另一个组件，但无法克服此错误：

ERROR TypeError: Cannot read properties of undefined (reading 'statistics')
    at StatsComponent_div_2_Template

我尝试了多种不同的实现，例如在声明变量时删除类型，并在HTML中添加？操作符，它删除了错误，但从未返回任何东西。有人能告诉我为什么吗？这是我的代码。问候，
类型脚本组件

export class StatsComponent implements OnInit {
  myCharactere: ICharactere = this.myService.getPersonnageByName("Xefoul Snaromers");
  statLookup = [

    { key: 'str', prefix: $localize`str`, suffix: $localize`enght`, couleur: 'bg-danger' },
    { key: 'dex', prefix: $localize`dex`, suffix: $localize`terity`, couleur: 'bg-primary' },
    { key: 'con', prefix: $localize`con`, suffix: $localize`stitution`, couleur: 'bg-warning' },
    { key: 'int', prefix: $localize`int`, suffix: $localize`elligence`, couleur: 'bg-success' },
    { key: 'sag', prefix: $localize`wis`, suffix: $localize`dom`, couleur: 'bg-info' },
    { key: 'cha', prefix: $localize`cha`, suffix: $localize`risma`, couleur: 'bg-dark' }
  ];
  constructor(public myService: ServeurService) { }

  ngOnInit(): void {
    console.log("mon perso stats", this.myCharactere)
  }
  
  getModifier(stat: number): string {
    const mod = Math.floor((stat-10)/2)
    return (mod<0)?'-':'+'+ mod.toString();
  }
}

HTML代码

<div class="row text-center text-light bg-secondary mt-2  bg-transparent">
    <div class="row mt-5">
        <div class="col-2" *ngFor="let stat of statLookup">
            <div class="{{stat.couleur}} mx-xxl-4 mx-2 mx-md-1 rounded-4">
                <div class="fw-bold">{{stat.prefix}}<span class="d-none d-lg-inline">{{stat.suffix}}</span>
                </div>
                <div class="h2">
                    {{getModifier(myCharactere.statistics[stat.key])}}
                </div>
                <div class="">
                    {{myCharactere.statistics[stat.key]}}
                </div>
            </div>
    </div>
</div>

类型脚本服务

export class ServeurService {
  token = '';
  serverCharacter = 'https://cegep.fdtt.space/v1/characters';
  serverSecret = 'https://cegep.fdtt.space/v1/secret';
  serverToken = 'https://cegep.fdtt.space/v1/token';
  personnages: any[] = [];
  persoName = '';

  constructor(private http_client: HttpClient) { }

  setPersonnageName(name: string) {
    this.persoName = name;
  }

  getPersonnageName():string {
    return this.persoName;
  }

  getPersonnageByName(name: string) {
    const persoSelectionne = this.getPersonnages().find((n: {name: string; }) => n.name === name);
    return persoSelectionne; 
  }
}