角度:在角度组件模板中使用时，数据将变为未定义，但存在于组件中

Question

我有一个这样的组件

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
public blogposts: Array<any> = [];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get("http://localhost:8080/demo/all").
subscribe(function(data){
this.blogposts=data;
console.log(this.blogposts[0]);
})
}
}

Console.log(this.blogposts[0])确实记录数组中的第一个对象，但是当在组件模板中使用它时，它变得未定义

和组件的模板如下

<div class="row">
<div class="col-sm-6">
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<app-blog-post *ngIf="blogposts[0]" [title]="blogposts[0].title"></app-blog-post>
</div>
<div class="col-sm-6">456</div>
</div>
<div class="row">
<div class="col-sm-6">123</div>
<div class="col-sm-6">456</div>
</div>
</div>
</div>

当我使用<app-blog-post *ngIf="blogposts[0]" >时，根本不显示任何内容，如果我使用空<app-blog-post *ngIf="blogposts" >则显示<app-blog-post>如果我完全删除*ngIf则会显示我分配给标题的默认值，即"abc"。

子组件是

import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-blog-post',
templateUrl: './blog-post.component.html',
styleUrls: ['./blog-post.component.css']
})
export class BlogPostComponent implements OnInit {
ngOnInit() {
}
@Input() title:String="abc";
}

它的模板是

<div>{{title}}</div>

即使博客文章包含 blogbost 对象数组，模板中undefinedblogposts[0]并且blogpost存在但无法从模板访问其内容对象？为什么会这样？

Answer 1

这可能与首先计算哪个表达式有关。基本上，ngIf数组仍然为空时运行，然后更改检测不会拾取它。我建议用div包装您的组件并在其上使用ngIf。

而不是：

<app-blog-post *ngIf="blogposts[0]" [title]="blogposts[0].title"></app-blog-post>

用：

<div *ngIf="blogposts[0]">
<app-blog-post [title]="blogposts[0].title"></app-blog-post>
</div>

你可以使表达式更加明确(以防blogposts[0]是假的(：

<div *ngIf="blogposts.length > 0 && blogposts[0].title != null">
<app-blog-post [title]="blogposts[0].title"></app-blog-post>
</div>

这将保证在初始化app-blog-post组件之前评估ngIf。

Answer 2

与其将标题作为输入传递@Input() title:String="abc";，不如将整个对象作为输入传递。 例如@input() blogpost: Blogpost = {}，那么
在你的HTML中，你应该传递博客文章：<app-blog-post [blogpost]="blogposts[0]"></app-blog-post>。
然后在博客文章组件中显示标题。

这实际上将检查 AngularchangeDetection中的更改。 因为您只传递对象的属性，而不是整个对象，因此更改检测不会考虑更改具有真正的更改。

Answer 3

标题绑定似乎可能会引发错误。因为您正在尝试访问尚不可用的博客文章[0].title。最初，">blogposts[0].title"等同于"undefined.title"。您可以通过更改 ngIf 条件来解决此问题，如下所示：

<app-blog-post *ngIf="blogposts && blogposts.length === 1" [title]="blogposts[0].title"></app-blog-post>

Answer 4

使用箭头函数而不是函数语句。

函数语句创建的每个新函数都根据函数的调用方式定义自己的此值。 所以使用箭头函数将引用当前对象

试试这个

ngOnInit() {
this.http.get("http://localhost:8080/demo/all").
subscribe((data) =>{
this.blogposts=data;
console.log(this.blogposts[0]);
})
}