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

Question

我想显示一个简单的玩家列表。现在我从我的后端服务器得到一个玩家列表。现在可以返回 Players 或 SpecialPlayers(继承自 Player)。

现在我想在列表中显示“Player”当它是一个Player 和“SpecialPlayer”当它是一个特殊播放器，我认为我可以用该代码实现它:

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

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

这就是我的 list :

<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;
      });
  }

感谢您的帮助!

Answer 1

问题是使用 http 客户端你的对象并不是真正的类，它只是一个只支持原生类型的 json 对象。

您有责任根据从服务器收到的内容在客户端上构建它。

更新——您必须手动映射结果。我所知道的最简单的方法是使用带有部分参数的构造函数。

参见 Can Angular `HttpClient` `.get()` generics have non-simple property types? (e.g. other than `string` or `number`)