bugfix> angular > 投稿

あいさつ。同じバックエンドコードを使用して、以前に行ったプロジェクトのフロントエンドを再構築することで、Angular 2を学習しようとしています。元のプロジェクトでは、フロントエンドでjQueryを使用し、バックエンドでPHPを使用していました。私は自分のフロントエンドをバックにフックし始めたいと思っていますが、機能させることができないようです。

現在、localhostのapache2で元のバックエンドコードを実行しており、Angularアプリがlocalhost:4200で実行されていることをテストしています。私がアクセスしようとしているバックエンドファイルはajax.phpにあり(パスは「localhost/pokemon/ajax.php」です)、そのファイルが参照されるたびにエラーを記録する行があります。

Angular 2サービスからhttp.getを実行し、コンポーネントに結果を記録すると、    [object Object] そして、ajax.phpはメッセージをログに記録しないため、一見コールされていないようです。

これが私のコードです。 I問題の関数は、各ファイルの下部にあります。

hero.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { of } from 'rxjs/observable/of';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import { MessageService } from './message.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
@Injectable()
export class HeroService {
  private heroesUrl = 'api/heroes';
  constructor(
    private messageService: MessageService,
    private http: HttpClient
  ) { }

  getHeroes (): Observable<Hero[]> {
    //return this.http.get<Hero[]>(this.heroesUrl)
    return null;
  }
  getHero(id: number): Observable<Hero> {
    // TODO: send the message _after_ fetching the hero
    this.messageService.add(`HeroService: fetched hero id=${id}`);
    return of(HEROES.find(hero => hero.id === id));
  }
  //calls http.get
  testFunc() {
    console.log("Test func is being called in the service");
    return of(this.http.get('localhost/pokemon/ajax.php?method=getTypes'));
  }
}

そして、私がテストしようとしているコンポーネント

heroes.component.ts

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];
  constructor(private heroService: HeroService) { }
  ngOnInit() {
    console.log("Init is being called");
    //this.getHeroes();
    this.testFunc();
  }
  //calls the test function
  testFunc(): void {
    console.log("Test function is being called");
    this.heroService.testFunc()
      .subscribe(
        data => console.log("Got this: " + data),
        err => console.log("Error " + err),
        () => console.log("Done!")
      );
  }
}

また、同じアプリでライブサーバーからデータを取得しようとしましたが、結果は同じでした。

ありがとう!

回答 3 件
  • このコードはあなたを助けるかもしれません

    this.heroService.testFunc().subscribe(
                (data => {
                    if (data["_body"] && data["_body"] != "") {
                         console.log(JSON.stringify(data["_body"]));
                    };
                }),
                error => this.toastr.error('Something went wrong !!', 'Oops!', {showCloseButton: true})
            );
    
    

    そしてあなたのサービスで

    testFunc() {
            return this._http.post('http://localhost:4200(the port on which your php code running)/pokemon/ajax.php', user).map(() => "your method or "" ");
        }
    
    

    ヘルプコメントが必要な場合

  • このようにしてみてください。それが動作します

    getusers() {
        const headers = new Headers(
                 {
                     accept: 'application/json/'
                 });
             const options = new RequestOptions({ headers: headers });
         return this.http.get(this.url, options).map((response: Response) => response.json());
      }
    
    

    そしてあなたの呼び出し関数で  取得する() {

     this.service.getusers().subscribe(a => {
        this.a = a;
        // console.log(a.length);
      });
      }
    
    

  • だから私はすべて非常に有用だったいくつかのコメントを得ました-私は(http.get(..))を返していましたが、それは物事を台無しにし、コンソールに正しく受け取っていたエラーを記録していませんでした。

    期待どおりに機能していませんが、先に進むのに十分なので、現在の問題はほとんど解決されているため、新しい質問を開きます。 皆さんありがとう!

あなたの答え