Question

我使用的代码没有太复杂，但是我似乎无法弄清楚为什么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>

这是我的服务文件

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private http: HttpClient) { }
  getUsers(){
    return this.http.get('https://jsonplaceholder.typicode.com/users')
  }
  getUser(userid){
    return this.http.get('https://jsonplaceholder.typicode.com/users/'+userid)
  }
  getPosts(){
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

在检查控制台时，它显示未定义，并且在html页面中仅标题可见，没有数据。我该怎么办？

Answer 1

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

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

现在在您的html中，您正在使用post $，但是您已经在ts中声明了posts $，并且代码中还有其他一些错别字。因此将其更改为

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

Answer 2

您应仅将console.log放置在订阅中，

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

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

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

Answer 3

您的html文件应如下所示：

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

还必须将console.log放在api调用函数中，如下所示：

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

这可能不是主要问题，但可能有助于找出主要问题，请尝试一下并保持最新状态，以便我们解决问题！

Answer 4

我真的很感谢所有回答并尝试帮助我，但我已解决问题的人。帖子是否为posts $并不重要，因为我将其用作变量名。

问题出在这里

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

代替pdata => this.posts$ = pdata 从我已调用的DataService模块中调用它时，它应该是data => this.posts$ = data。因此，通过将其更改为pdata，它无法识别该模块，因此无法在html文件中看到任何数据。现在正在工作

Answer 5

只需修复此帖子$应为任何

的数组

 posts$: any[];

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

 posts$: any[] =[];

要检查result（pdata）值，只需将console.log移至订阅回调，或仅检查chrome开发人员工具中的网络面板：

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

无法获取角度6中的api值

5 个答案: