0

QuestionService に DataService を挿入しようとしていますが、「this.questions2」を割り当てると、AppComponent はまだ値が未定義であると考えています。私は得る

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:20 caused by: Cannot read property 'forEach' of undefined

プランクはこちら

質問サービス

getQuestions(DataService: DataService<any>){
    this.DataService.getData()
        .subscribe(
            function(response) { 
                this.questions2 = response;
                return this.questions2;                   
            },

            function(error) { console.log("Error happened" + error)},
            function() { console.log("the subscription is completed")}
        );
    }

データサービス

getData (){
    return this.http.get(this.apiUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    console.log(body);
    return body || { };
  }

アプリコンポーネント

import { QuestionService } from './question.service';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Job Application for Heroes</h2>
      <dynamic-form [questions]="questions"></dynamic-form>
    </div>
  `,
  providers:  [QuestionService]
})
export class AppComponent {
  questions: any[];

  constructor(service: QuestionService) {
//why is the line below undefined?!
    this.questions = service.getQuestions();
  }
}
4

1 に答える 1

1

オブザーバブルを正しく使用していません。次に、エンドユーザーがサブスクライブする必要があります。質問サービスでこれを行う場合

getQuestions(DataService: DataService<any>){
    this.DataService.getData()
        .subscribe(
            function(response) { 
                this.questions2 = response;
                return this.questions2;                   
            },

            function(error) { console.log("Error happened" + error)},
            function() { console.log("the subscription is completed")}
        );
}

関数のリターンは、あなたが思っていることをしません。できるとは限らない

questions = service.getQuestions();

それはそれがどのように機能するかではありません。これは、サービス オブザーバブルにサブスクライブする必要があるコンポーネントです。本当に、それを考えると問診サービスは使い物になりません。目的はありません。データ サービスがすべての作業を行っています。したがって、引き続き質問サービスを使用したい場合は、単に呼び出しをgetData

getQuestions() {
  return this.dataService.getData();
}

おっしゃる通り、かなり駄目です。次に、コンポーネントで、サービスにサブスクライブする場所です

getQuestions().subscribe((data) => {
  this.questions = data;
})

その他の注意事項:

  • キーワードの代わりに、コールバックにアロー関数を使用する方法を学ぶ必要があります。function
  • 前回の投稿DataServiceのis で、まだ同じ間違いを犯しているようです。
  • コンポーネントでは、questionsを空の配列に初期化する必要があります。questions = []監視可能なサブスクリプションは非同期であり、初期化されていない場合、テンプレートは未定義の値を使用しようとするためです。
于 2016-12-12T04:02:05.400 に答える