Angular

Question

我对学习 Angular 还比较陌生，并已按照 PluralSight 演示中的一些说明设置基本服务、组件和 HTML 页面。

当我运行我的服务和调试时，我可以看到该服务成功地检索了我需要的数据。但是，HTML 的一部分似乎没有经过更改检测。我显示的日期属性成功地做到了这一点，但是我的数组只是被忽略了。

我试过显式创建一个单独的数组并分配给另一个变量，这也没有用。我缺少有关 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 数组（代表另一个接口）。

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

在控制台中，我清楚地填充了 rankpositions 数组：

Answer 1

你打错了，所以应该关闭。

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

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

IMO 更好的解决方法是切换到 async 管道并使用 rx 运算符运行你的切片。

一般 angular 最佳做法是不要运行模板中的函数，在适当的时候使用管道，但通常你的函数应该运行在你的组件控制器中。

Answer 2

请将rankpositions改为rankPositions

Angular - 未通过变化检测注册的对象的值变化

Angular - Value change of object not registering through change detection

interface

ngfor

angular-changedetection

ngoninit