Question

我正在学习按角度使用服务，但在订阅组件时遇到问题。我在做什么错了？

我进行了一些投票，但没有一个起作用

组件

import { Component, OnInit } from '@angular/core';
import { Tweet } from '../Models/tweet';
import { TweetService } from '../Services/tweet.service';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-twitter',
  templateUrl: './twitter.component.html',
  styleUrls: ['./twitter.component.css']
})
export class TwitterComponent implements OnInit {

  tweet: Array<Tweet>;

  constructor( private tweetService : TweetService) {
    this.tweetService = tweetService;
   }

  ngOnInit() {
    this.tweetService.getListTweet()
      .subscribe((data : Array<Tweet>) => {
        this.tweet = data;
      },
      err => {
        console.log(err);
      });
  }

}

这是我的服务，我不知道这是问题还是在组件中

import { Injectable } from '@angular/core';
import { HttpClient } from 'selenium-webdriver/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

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

  baseUrl: string = "http://jsonplaceholder.typicode.com";

  constructor(private httpClient: HttpClient) {
    this.httpClient = httpClient;
   }

   getListTweet(){
    return this.httpClient.get(`${this.baseUrl}/posts`);
  }
}

Answer 1

您只需要这样注入

 constructor(private httpClient: HttpClient) {

 }


 constructor(private tweetService : TweetService) {
 }

Answer 2

import { Component, OnInit } from '@angular/core';
import { Tweet } from '../Models/tweet';
import { TweetService } from '../Services/tweet.service';
import { HttpClient } from '@angular/common/http';


@Component({
  selector: 'app-twitter',
  templateUrl: './twitter.component.html',
  styleUrls: ['./twitter.component.css']
})
export class TwitterComponent implements OnInit {

  tweet: Array<Tweet>;

  constructor( private tweetService : TweetService) {
   }

  ngOnInit() {
    this.tweetService.getListTweet()
      .subscribe((data : Array<Tweet>) => {
        this.tweet = data;
      },
      err => {
        console.log(err);
      });
  }

}

服务：

 import { Injectable } from '@angular/core';
    import { HttpClient } from 'selenium-webdriver/http';
    import { Observable } from 'rxjs/observable';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/observable/throw';

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

      baseUrl: string = "http://jsonplaceholder.typicode.com";

      constructor(private httpClient: HttpClient) {
       }

       getListTweet(): Observable<any>{
        return this.httpClient.get(`${this.baseUrl}/posts`);
      }
    }

Answer 3

仅当您需要更多信息时才可以将其插入https://angular.io/guide/dependency-injection中，以将它们注入构造函数中。基本上，当我将其作为构造函数的参数提供给您时，您就可以引用您的服务，并且您可以从该引用中调用所有道具/方法。无需在组件中附加引用。

订阅错误：类型“ void” .ts（2339）上不存在属性“ subscribe”

3 个答案: