角度-对象的值更改未通过更改检测注册

如何解决角度-对象的值更改未通过更改检测注册

我刚开始学习Angular，并已按照PluralSight演示中的一些说明设置了基本服务，组件和HTML页面。

运行服务并调试时，可以看到该服务已成功检索所需的数据。但是，部分HTML似乎没有经过更改检测。我显示的date属性可以成功完成此操作，但是我的数组将被忽略。

我尝试显式创建一个单独的数组并将其分配给另一个变量，这也没有用。 ngModel和我缺少的更改检测周围有东西吗？

服务：

@Injectable({
  providedIn: 'root'
})
export class RankingService {
  private rankingUrl = 'https://localhost:44381/api/Ranking'

  constructor(private http: HttpClient) { }

  getRanking(): Observable<IRanking> {
    return this.http.get<IRanking>(this.rankingUrl)
      .pipe(
        tap(data => console.log('All: ' + JSON.stringify(data))),catchError(this.handleError)
      );
  }

HTML：

<div class='row'>
  {{'Last Updated: ' + ranking?.startDateTime}}
</div>
<table class='table' *ngIf='ranking'>
  <thead>
    <tr>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let position of ranking.rankpositions?.slice(0,30)'>
      <td>
        {{ position.Rank }}
      </td>
    </tr>
  </tbody>
</table>

组件：

export class RankingListComponent implements OnInit {
  errorMessage = '';
  ranking: IRanking;

  constructor(private rankingService: RankingService) { }

  ngOnInit(): void {
    this.rankingService.getRanking().subscribe({
      next: ranking => {
        this.ranking = ranking;
      },error: err => this.errorMessage = err
    });
  }

}

IRanking是一个接口，带有一个rankPositions数组（代表另一个Interface）。

作为输出，我得到了这一点（我删除了一些HTML元素，以使代码段更小）：

在控制台中，我显然填充了rankpositions数组：

解决方法

您有错字，所以应该关闭。

但是除此之外，在模板中运行类似的功能几乎总是会导致您更改检测问题。请使用slice管道代替此处进行快速修复：

<tr *ngFor='let position of ranking.rankPositions | slice:0:30'>

更好的解决方案IMO将切换到async管道并使用rx运算符运行您的分片。

一般的角度最佳实践是不要在模板中运行函数，在适当的时候使用管道，但是通常情况下，您的函数应该在组件控制器中运行。

,

请从rankpositions更改为rankPositions