列表项重复但数据正确

Question

我是 Angular 的新手，我正在尝试显示从 API 检索的一些数据。我正在使用 Angular 5 和 Observables。当我多次调用以检索数据时，我的列表没有用新数据刷新（替换），而是重复了数据。我已尽我所能确保底层数组不包含重复数据。

这是我获取玩家列表的方法：

getPlayersByTeam(teamId:string) {
   console.log("Calling eval /player/roster/" + teamId);

   this.httpClient.get<Player[]>(this.evalServerBase + this.rosterUrl + teamId).subscribe(
   data => {
       this.players = data as Player[];
       console.log("EVAL SERVICE PLAYERS " + this.players.length);
       this.data.setPlayers(this.players);
   },
   success => {
       console.log("Successfully Completed getPlayersByTeam");        
       console.log(success);
   }
 );      
}

我的数据服务包含这个：

    private playersSource = new BehaviorSubject<Player[]>(null);
    currentPlayers = this.playersSource.asObservable();

和

     setPlayers(players:Player[]) {
        this.playersSource.next(players);
        console.log("DATA SERVICE PLAYERS " + this.playersSource.value.length );
    }

这是我的 playerselector.component.ts 文件中的一些代码：

currentPlayers:Player[];

ngOnInit() {
    console.log("Init in playerselector.ts");
     this.data.currentPlayers.subscribe(currentPlayers => this.currentPlayers = currentPlayers);
}

这是我的 playerselector.component.html 文件：

<div *ngIf="currentPlayers.length < 1">
    No Players
</div>
<div *ngIf="currentPlayers.length > 0" >
    Hello:{{currentPlayers.length}}      
    <ul class="Player" >
        <li *ngFor="let currentPlayer of currentPlayers; let i = index" class="Player" >
            <div>
                {{currentPlayer.lastName}} - {{i}} - {{currentPlayers.length}}
            </div>
        </li>
    </ul>
</div>

我检查了所有相关数据，数组中只有 4 个元素。在图像中，我显示了每个元素的索引和数组大小，所以我很确定数据是正确的。

为什么我的列表重复？非常感谢任何建议。

Answer 1

正如我所看到的，您数组中的数据非常好，但仍然存在这个问题，这意味着它必须对视图层而不是您的数据进行处理。

这通常是由于 angular 错误造成的，有时当您的代码的某些方面出现问题时，angular 不会清除之前的视图，而是附加新的视图层。

检查您的控制台并消除所有错误，这应该可以解决问题。

列表项重复但数据正确

List items duplicated but data is correct

html-lists

ngfor

angular

angular5