Angular 未通过变化检测登记的对象的角度值变化

我对Angular的学习相对较新，并遵循了PluralSight演示中关于设置基本服务、组件和HTML页面的一些说明

当我运行服务并调试时，我可以看到该服务成功地检索到了我需要的数据。然而，HTML的一部分似乎并没有经过更改检测。我显示的date属性成功地完成了这项工作，但是我的数组被忽略了

我已经尝试过显式地创建一个单独的数组并分配给另一个变量，但这也不起作用。在ngModel和change detection中是否有我遗漏的东西

服务：

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

IRanking是一个接口，具有rankPositions数组（表示另一个接口）

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

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

---

您有一个输入错误，因此应该关闭此窗口

但除此之外，在模板中运行这样的函数通常会导致更改检测问题。在此处使用

切片

管道进行快速修复：

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

更好的修复方法是切换到

async

pipe，并使用rx操作符运行切片

---

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

您有一个输入错误，因此应该关闭此操作

但除此之外，在模板中运行这样的函数通常会导致更改检测问题。在此处使用

切片

管道进行快速修复：

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

更好的修复方法是切换到

async

pipe，并使用rx操作符运行切片

---

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

请将

rankpositions

更改为

rankpositions
请将
rankpositions
更改为
rankpositions
请尝试
this.ranking=JSON.parse（JSON.stringify（ranking））
。尝试过，但没有乐趣。通过在调试模式下查看this.ranking，可以毫无问题地映射它。请尝试使用
async
pipe，而不是在组件中订阅。这很可能会解决问题。这些引用似乎没有更新。您能否共享控制台日志，代码似乎正常，从上次更新的值来看，它似乎正常工作。问题可能是行
let position of ranking.rankpositions
。唯一的控制台错误是：sockjs.js:1684 WebSocket连接到'wss://localhost:44381/sockjs-node/148/mj40ffub/websocket'失败：websocket握手期间出错：“Connection”头丢失请尝试
this.ranking=JSON.parse（JSON.stringify（ranking））
。尝试过，但没有乐趣。通过在调试模式下查看this.ranking，可以毫无问题地映射它。请尝试使用
async
pipe，而不是在组件中订阅。这很可能会解决问题。这些引用似乎没有更新。您能否共享控制台日志，代码似乎正常，从上次更新的值来看，它似乎正常工作。问题可能是行
let position of ranking.rankpositions
。唯一的控制台错误是：sockjs.js:1684 WebSocket连接到'wss://localhost:44381/sockjs-节点/148/mj40ffub/websocket'失败：websocket握手过程中出错：“Connection”标头缺少链接。我不知道Angular区分大小写，谢谢。我不知道Angular区分大小写谢谢你的建议谢谢你的建议
<tr *ngFor='let position of ranking.rankPositions | slice:0:30'>