ng對於奇怪的不同行爲

我試着從帖子列表中獲得第一個資產。該列表來自web api。ng對於奇怪的不同行爲

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個格，只是用IDS 2。這是我期待的。

<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>

但在這種情況下，控制檯會記錄4次。它記錄圖像存在的帖子，並重復不存在的值。

來源

2017-06-26 AFetter

在開發模式下，Angular運行會更改檢測兩次，以確保模型在第一次過後穩定。如果沒有，你會看到一個錯誤（類似於「檢查後表達式已經改變......」）。所以你會看到Angular爲每個有圖像的元素調用你的函數兩次的結果。

如果你在生產模式下運行，你的函數將只被調用一次，每個元素有一個圖像。

查看this post瞭解更多詳情。

來源

2017-06-26 23:35:57

ng對於奇怪的不同行爲

回答

相關問題