奇怪的不同行为

我正在尝试从帖子列表中获取第一个资源。此列表来自web api。

import { Component, OnInit } from '@angular/core';
import { BlogPostService } from '../services/blog-post.service';
import { BlogPost } from '../modules/blog-post';

@Component({
  selector: 'af-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})    
export class HomeComponent implements OnInit {

      blogPosts: BlogPost[];
      skip: number;
      showPrevious = false;
      constructor(private blogService: BlogPostService) { }

      ngOnInit() {
        this.skip = 0;
        this.getPosts(this.skip);
      }

      getPosts(skip: number) {
        this.skip = skip;

        this.blogService.getBlogPosts(skip).subscribe(dt => this.blogPosts = dt});
      }
      getAssetById(id: string) {
        console.log('id:', id);
      }
    }

这种奇怪的行为发生在前端侧。blogPosts是一个包含4张但只有2张图片的列表。

<div class="col-sm-6" *ngFor="let post of blogPosts">
      <div class="card">
        {{ post.fields.images && post.fields.images[0].sys.id}}
      </div>
 </div>

结果是4个div,只有2个id。这正是我所期待的。

<div class="col-sm-6" *ngFor="let post of blogPosts">
      <div class="card">
        {{ post.fields.images && getAssetById(post.fields.images[0].sys.id) }}
      </div>
</div>