Checkbox 角度2数据模型

我正在学习angular2，我有一个关于如何构造数据模型的问题。假设我们有一个排行榜（）。排行榜显示了一个玩家列表、他们的分数以及一个复选框，该复选框指示您是否在“跟踪”该玩家。玩家和他们的分数是从后端填充的，该后端从服务器定期更新，但“followed”属性存储在本地。如果用户想了解玩家在当前正在进行的游戏中所做的事情，则会选中该复选框。在plunker中，我们有一个LeadsboardComponent，其中包含一系列LeadsboardItemComponents。排行榜组件有一个排行榜服务，它每2秒生成一个新的排行榜对象

plunker显示了这样做的“错误”方式。玩家姓名、分数和“跟随”属性包含在同一个模型中。每2秒生成一个新的排行榜对象；如果选中该复选框，它将被选中，直到下一次更新，然后该复选框将消失，因为正在创建一个全新的对象（并且服务器没有提供“followed”属性；该属性特定于客户端的用户）。应该发生的是，即使生成新的排行榜对象，复选框仍将保持选中状态（并且模型将保持正确的“跟随”状态）

我考虑的主要解决方案是将分数和名称与“followerd”属性完全分离。它们目前都包含在排行榜项目模型中。我可以创建一个followered模型，以及一个followeredService来持久化被跟踪玩家的列表……但是我仍然需要LeaderboardItemComponent上的一个“followered”属性，并且在生成新的排行榜时，它必须手动与followeredService保持同步。有没有更多的ng2方法可以做到这一点？非常感谢您阅读本文，如果我能澄清，请告诉我。我已将相关代码包括在下面（主要不包括出于长度目的的进口）：

应用组件：

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <h2>Leaderboard</h2>
      <leaderboard>
      </leaderboard>
    </div>
  `,
  directives: [LeaderboardComponent]
})
export class App {
  constructor() {
    this.name = 'Angular2'
  }
}

@Component({
    selector: 'leaderboard',
    providers: [LeaderboardService],
    bindings: [LeaderboardService],
    template: `
    <div *ngIf="loaded">
      <div>
        <leaderboard-item *ngFor="#li of leaderboard.items" [model]="li">
        </leaderboard-item>
      </div>
    </div>
  `,
    directives: [LeaderboardItemComponent]
})
export class LeaderboardComponent {
  @Input() leaderboard: Leaderboard;
  loaded: boolean = false;

  constructor(public leaderboardService:LeaderboardService) {
    leaderboardService.getLeaderboard()
      .subscribe(res => this.setLeaderboard(res));
  }

  setLeaderboard(leaderboard:any) {
      this.leaderboard = leaderboard;
      this.loaded = true;
  }
}

@Component({
    selector: 'leaderboard-item',
    template: `
    <div>
      {{model.name}}
      {{model.score}}
      <input type="checkbox" [(ngModel)]="model.isFollowed">
    </div>
  `
})
export class LeaderboardItemComponent {
  @Input() model: LeaderboardItem;

  constructor() {
  }
}

排行榜（型号）：

排行榜项目（型号）：

@Injectable()
export class LeaderboardService {
  leaderboard: Leaderboard;
  leaderboardStream;

  constructor(public http: Http) {
    this.leaderboardStream = Observable.timer(1, 2000)
        .map(data => this.generateRandomLeaderboard())
  }

  getLeaderboard() {
    return this.leaderboardStream;
  }

  generateRandomLeaderboard() {
    this.leaderboard = new Leaderboard();
    this.leaderboard.addItem(new LeaderboardItem("Player1", 1000*Math.random()))
    this.leaderboard.addItem(new LeaderboardItem("Player2", 1000*Math.random()))
    return this.leaderboard
  }
}

export class Leaderboard {
  name: string;
  items: LeaderboardItem[] = new Array();

  constructor() {
    this.name = "Top Players"
  }

  addItem(li:LeaderboardItem) {
    this.items.push(li)
  }
}

export class LeaderboardItem {
  name: string;
  score: string;
  isFollowed: boolean = false;

  constructor(name:string, score:string) {
    this.name = name
    this.score = score
  }
}