angular - 构造函数中设置的变量不可见

我想展示一个简单的球员名单。现在我从我的后端服务器得到一个球员名单。现在可以回来的球员或特殊球员（谁继承球员）。
现在我想在列表中显示“player”，当它是一个player，而“specialplayer”当它是一个特殊的player，我想我可以用代码实现它：

export class Player {
    name: string;
    mode: string;
    constructor() {
        this.mode="Player";
    }
}

export class SpecialPlayer extends Player{
    constructor() {
        super();
        this.mode="SpecialPlayer";
    }
}

这是我的清单：

<table width="100%">
    <tr *ngFor="let player of players">
        <div>{{player.name}}</div>
        <div>{{player.mode}}</div>
    </tr>
</table>

因此显示名称，但模式不显示（或显示但没有内容）。
对后端服务器的调用：

loadPlayers(): void {
    this.auth.loadPlayers().subscribe(
      data => {
        this.players= data;
      });
  }

谢谢你的帮助！

最佳答案

问题是，使用http客户端，对象实际上不是类，它只是一个仅支持本机类型的json对象。
您负责根据从服务器接收到的内容在客户端上构建它。
更新--
必须手动映射结果。我知道的最简单的方法是使用带有部分参数的构造函数。
见Can Angular `HttpClient` `.get()` generics have non-simple property types? (e.g. other than `string` or `number`)