angular - AppComponent.html :7 ERROR TypeError: _co. getPosts 不是 Object.eval 的函数 [as handleEvent]

Question

我是 Angular 的新手，我正在尝试使用按钮显示 API 调用的结果，认为 data.service.ts.Console 显示了这个问题:

AppComponent.html:7 ERROR TypeError: _co.getPosts is not a function at Object.eval [as handleEvent]

请帮忙

应用程序组件.ts

import { Component } from '@angular/core';
import { HttpClient} from '@angular/common/http';
import { Post } from './post';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'API';


}

App.component.html

    <div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <div>
    <button (click)="getPosts()"> Get Posts!</button>
  </div>

    <div>

    <input type='text'(keydown)="search($event)" placeholder='search posts...'>

    </div>
    <div *ngFor="let post of posts">
      <p><b>Title :</b> {{this.posts.title}}</p>
      <p><b>Body: </b>{{this.posts.body}}</p>
    </div>

    <div></div>
</div>



<router-outlet></router-outlet>

数据.服务.ts

import { Injectable } from '@angular/core';
import { Post } from './post';
import { Observable } from 'rxjs';
import { HttpClient} from '@angular/common/http';


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

  readonly ROOT_URL = 'https://jsonplaceholder.typicode.com';

 posts: Observable<any[]>;


  constructor(private http: HttpClient) {}

  getPosts() {
   this.posts = this.http.get<Post[]>(this.ROOT_URL + '/posts')
 }
}

谢谢!!!

Answer 1

getPosts() 函数是 undefined因为它没有在 app.component.ts 中定义.相反，它只是在服务中已知，这意味着您必须将其添加到 constructor像这样然后将方法添加到 app.component.ts

constructor(private dataService: DataService) {}
 getPosts() { 
   this.dataService.getPosts() 
}

但是您没有从 DataService 返回任何值所以它将保留在 Observable 中仅在 DataService 中已知.

如果你想显示结果你需要从DataService返回值

数据服务.ts

getPosts() {
   return this.http.get<Post[]>(this.ROOT_URL + '/posts')
}

然后你可以将它保存到app.component.ts中的某个变量中

getPosts() { 
  this.posts = this.dataService.getPosts() 
}

像这样更新你的html结构

<div *ngFor="let post of posts | async">
  <p><b>Title :</b>{{post.title}}</p>
  <p><b>Body: </b>{{post.body}}</p>
</div>

顺便说一句search($event)太叫了一些undefined功能。