角度4型のスクリプトオブジェクト変数は、メソッドから呼び出すときにnullに設定されます

次のコンポーネントを使用して以下のコンポーネントを使用して、angle 4 appを作成しました。角度4型のスクリプトオブジェクト変数は、メソッドから呼び出すときにnullに設定されます

<div></div> 
<p>d3 works!</p> 
<button (click)="getCommitData()">button1</button> 
<label style="display: block">{{data}}</label> 

import {Component, OnInit} from '@angular/core'; 
import {HttpModule, Http} from '@angular/http'; 
import 'rxjs/add/operator/toPromise'; 
import * as $ from 'jquery'; 

@Component({ 
    selector: 'app-d3', 
    templateUrl: './d3.component.html', 
    styleUrls: ['./d3.component.css'] 
}) 
export class D3Component { 
    user: String = 'angular'; 
    repo: String = 'angular.js'; 
    data: String; 
    error: String; 
    url: string; 
    constructor(private http: Http) { 
    this.url = 'https://api.github.com/repos/' + this.user + 
     '/' + 
     this.repo + 
     '/commits'; 
    } 

    humanReadableDate(d: Date): String { 
    return d.getUTCMonth() + 1 + '/' + d.getUTCDate(); 
    } 

    reformatGITResponse(data: String[]): any { 
    return data; 
    } 

    handleError(error: any): Promise<any> { 
    console.error('An error occurred', error); // for demo purposes only 
    return Promise.reject(error.message || error); 
    } 

    getCommitData(): Promise<any> { 
    return this.http.get(this.url).toPromise() 
     .then(response => this.reformatGITResponse(response.json().data)) 
     .catch(this.handleError); 
    } 

} 

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>AngularAppSimple</title> 
<base href="/"> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
    <app-root></app-root> 
    <app-d3></app-d3> 
</body> 
</html>

しかし、私はcomponent.htmlからgetCommitData（）を呼び出すとき、私は上記getCommitData方法で両方URLとHTTP変数にnullを取得しています。しかし、コンストラクタの起動時にurl変数が設定されています。

どのようにタイプスクリプトオブジェクトが注入されるのですか？

また、から返されたデータを表示するには、上記のgetCommitDataメソッドを使用しますか？

出典

2017-10-04 Curious

私はinit変数にngOnInitを使うことをお勧めします。 "this.user"と "this.repo"はコンストラクタ – mwe

でまだ使用できない可能性があります。 – Curious

あなたのhtmlコンテンツを投稿する – wolverine

私は指摘しているように、おそらくコンストラクタは、変数が解決されない可能性があるので、HTMLテンプレートから直接呼び出さないでください。

は、基本的には、それが終了するまで待つよりconstructroから、残りのAPIを呼び出し、LOADINGのようないくつかのフラグでマーク

constructor(private http: Http) { 
    this.url = 'https://api.github.com/repos/' + this.user + 
     '/' + 
     this.repo + 
     '/commits'; 
     this.getCommitData(); 
    } 

    getCommitData(): Promise<any> { 
    return this.http.get(this.url).toPromise() 
     .then(response => { 
     **this.loading = false;** 
     return this.reformatGITResponse(response.json().data) 
     }) 
     .catch(this.handleError); 
    }

のようなものを試してみてください。テンプレートでは、全ページを表示することができますngIf=!loading

出典

2017-10-04 08:54:26 pezetem

コンストラクタメソッドは一度呼び出され、オブジェクトは作成です。したがって、 'this.getCommitData（）;'はAngularアプリサイクル全体を通して一度呼び出されます。したがって、コンポーネントが画面にロードされるたびに 'this.getCommitData（）;'が呼び出されるようにするには、ngOnInitに配置するのが最適です。 – LogicDev

onInitとconstrutorからgetCommitDataを呼び出すと、変数は開始されていますが、 button1これはまだURLとhttpをnullにしています。 – Curious

''は ' – cyrix

角度4型のスクリプトオブジェクト変数は、メソッドから呼び出すときにnullに設定されます

答えて

関連する問題