Question

我尝试从帖子列表中获取第一个资源。此列表来自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>

但在这种情况下，控制台记录4次。它记录图像存在的帖子，并重复不存在的值。

Answer 1

在开发模式下，Angular运行两次更改检测以确保模型在第一次传递后已稳定。如果没有，你会看到一个错误（例如“表达式在检查后发生了变化......”）。所以你看到Angular的结果是为每个有图像的元素调用你的函数两次。

如果您在生产模式下运行，则只为具有图像的每个元素调用您的函数一次。

查看this post了解详情。

对于奇怪的不同行为

1 个答案: