无法获取angular 6中的api值

我使用的代码并不复杂，但我似乎无法理解为什么

Get

请求无法获取api值。它能够做到这一点，但当涉及到用户的帖子，它失败得很惨

这是我的posts.components.ts：-

import { Component, OnInit } from '@angular/core';

import {DataService} from '../data.service';
import {Observable} from 'rxjs';


@Component({
  selector: 'app-posts',
  templateUrl: './posts.component.html',
  styleUrls: ['./posts.component.css']
})
export class PostsComponent implements OnInit {
  posts$: Object;

  constructor(private pdata: DataService) {
   }

  ngOnInit() {
      this.pdata.getPosts().subscribe(
        pdata => this.posts$ = pdata
      )

      console.log(this.posts$);
  }

}

这是html文件：-

<h1>Posts</h1>
<ul>
  <li *ngFor = "let pst of post$">
    <a routerLink=""> {{post$.title}}</a>
    <p>{{post$.body}}</p>
  </li>
</ul>

---

在检查控制台时，会显示undefined，在html页面中，只有标题可见，没有数据。我该怎么办？

您应该将console.log仅放在subscribe中

 ngOnInit() {
      this.pdata.getPosts().subscribe(
        pdata => {
          this.posts$ = pdata;
          console.log(this.posts$);
        });    
  }

如果要访问组件中的变量，请使用*ngIf或安全导航操作符，因为您的请求是异步的

 <a routerLink=""> {{post$?.title}}</a>
    <p>{{post$?.body}}</p>

{{post$？.title}
{{post$？.body}

您的html文件应如下所示：

<h1>Posts</h1>
<ul>
  <li *ngFor = "let post of posts$">
    <a routerLink=""> {{post.title}}</a>
    <p>{{post.body}}</p>
  </li>
</ul>

ngOnInit() {
    this.pdata.getPosts().subscribe(
      pdata => { 
          this.posts$ = pdata;
          console.log(this.posts$);
      }
    )  
}

---

这可能不是主要问题，但可能有助于找出主要问题，请尝试一下，让我不断更新，以便我们能够解决它

首先，您要在订阅之外登录。这意味着，在从api获取数据之前，您需要记录数据。更改如下

  ngOnInit() {
   this.pdata.getPosts().subscribe(
     pdata => {
       this.posts$ = pdata
       console.log(this.posts$);
     } 
   )
  }

现在在html中，您使用的是post$，但您在ts中声明了post$，并且代码中还有一些其他打字错误。所以把它改成

<h1>Posts</h1>
<ul *ngIf="posts$.length > 0">
  <li  *ngFor = "let post of posts$">
   <a routerLink=""> {{post.title}}</a>
   <p>{{post.body}}</p>
  </li>
</ul>

帖子


{{post.title}
{{post.body}

我真的很感谢你们所有回答我并试图帮助我的人，但我已经解决了这个问题。posts是否为posts$并不重要，因为我只是将其用作变量名

问题就在这里

 ngOnInit() {
      this.pdata.getPosts().subscribe(
        pdata => this.posts$ = pdata

而不是

pdata=>this.posts$=pdata

---

它应该是

data=>this.posts$=data

，因为它是从我调用的DataService模块调用的。因此，通过将其更改为pdata，它无法识别模块，因此我无法看到html文件中的任何数据。它现在正在工作

只要修复这个posts$应该是任何

 posts$: any[];

用这样的空数组初始化是安全的

 posts$: any[] =[];

要检查结果（pdata）值，只需将console.log移动到subscribe callback或只需检查chrome developer tool中的网络面板即可：

ngOnInit() {
      this.pdata.getPosts().subscribe(pdata => {
           this.posts$ = pdata;
           console.log(this.posts$);
  });  
}

---

你到处都有很多错误

posts$

应该是组件中的

posts

（它不是可观察的）。它应该是一个数组，而不是一个对象，所以不要将其键入为对象。在模板中，

post$

应该是

posts

<代码>pst应该是

post

post$.title

应该与body的

post.title

相同。@JBNizet仅供参考，因为我还在学习Angular 6。等一下，我会告诉你结果的。如果您可以检查该链接，您可以看到在用户组件中完成了相同的操作，并且用户视图正在正常工作。错误，是的。你问为什么你的代码不起作用，我告诉你为什么。有什么问题吗？@JBNizet我确实做了必要的修改，但仍然一无所获。实际上，它以前在控制台中显示未定义，而现在它什么也不显示\Your console.log，正如Sajeetharan的响应所告诉您的，这是没有意义的。您不能期望在发送电子邮件后立即阅读对电子邮件的回复。您只能在接收器已响应时读取响应。这里也一样。当我这样做时，它说'void'类型的参数不能赋值给'（error:any）=>void'类型的参数，这很重要，因为

$

后缀是一种约定，表示变量是可观察的，而posts$不是可观察的。所以，你把那些不得不维护你的代码的可怜的家伙弄糊涂了。就像将firstName命名为包含lastName的变量一样，反之亦然。编译器不在乎，但维护者在乎。第二部分没有任何意义：可以为局部变量和参数选择所需的名称。是的，数据不那么容易混淆，因为您还有一个名为pData的实例变量（它的名称非常糟糕）。我刚刚对它进行了测试，实际上这是我特别提到的代码的第二部分。是的，正如我前面提到的那样，在我的部分中包含$suffix是一个错误，我只是在学习这个框架，所以我还没有完全熟悉所有的sytnax规则。但是谢谢你的解释，但实际上，pdata是这里的问题。很抱歉，这个方法给了我更多的“未定义”错误。我很感激你的帮助，但这只会让事情变得更糟。不过我知道有错别字。我没有注意到*ngFor中的post已变成pst，但主要问题在于行

pdata=>this.posts$=pdata

由于到处都使用相同的数据变量，我将其误认为是局部变量，当我尝试以不同的方式命名每个变量时，我遇到了这个错误

ngOnInit() {
      this.pdata.getPosts().subscribe(pdata => {
           this.posts$ = pdata;
           console.log(this.posts$);
  });  
}