title: Angular - Value change of object not registering through change detection
body: <p>i'm relatively new to learning Angular and have followed some instructions from a PluralSight demo on setting up a basic service, component and HTML page.</p>
  <p>When I run my service and debug, I can see that the service is successful in retrieving the data I need. However, part of the HTML doesn't seem to go through change detection. The date attribute I display does this successfully, however my array just gets ignored.</p>
  <p>I've tried explicitly creating a separate array and assigning to a different variable, which also didn't work. Is there something around the ngModel and change detection I am missing?</p>
  <p>Service:</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class RankingService {
    private rankingUrl = 'https://localhost:44381/api/Ranking'
  
    constructor(private http: HttpClient) { }
  
    getRanking(): Observable&lt;IRanking&gt; {
      return this.http.get&lt;IRanking&gt;(this.rankingUrl)
        .pipe(
          tap(data =&gt; console.log('All: ' + JSON.stringify(data))),
          catchError(this.handleError)
        );
    }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;div class='row'&gt;
    {{'Last Updated: ' + ranking?.startDateTime}}
  &lt;/div&gt;
  &lt;table class='table' *ngIf='ranking'&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Rank&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr *ngFor='let position of ranking.rankpositions?.slice(0,30)'&gt;
        &lt;td&gt;
          {{ position.Rank }}
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  <p>Component:</p>
  <pre><code>export class RankingListComponent implements OnInit {
    errorMessage = '';
    ranking: IRanking;
  
    constructor(private rankingService: RankingService) { }
  
    ngOnInit(): void {
      this.rankingService.getRanking().subscribe({
        next: ranking =&gt; {
          this.ranking = ranking;
        },
        error: err =&gt; this.errorMessage = err
      });
    }
  
  }
  </code></pre>
  <p>IRanking is an interface, with an array of rankPositions (Which represents another Interface).</p>
  <p>As an output I get this (I've removed some HTML elements, to make the code segment smaller):</p>
  <p><a href="https://i.stack.imgur.com/cyqyZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cyqyZ.png" alt="enter image description here" /></a></p>
  <p>In the console, I clearly have the rankpositions array populated:
  <a href="https://i.stack.imgur.com/JSRKJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JSRKJ.png" alt="enter image description here" /></a></p>