角2購読者からデータを返す方法

Question

これは私がしたいものです。

@Component({ 
    selector: "data", 
    template: "<h1>{{ getData() }}</h1>" 
}) 

export class DataComponent{ 
    this.http.get(path).subscribe({ 
     res => return res; 
    }) 
} 

getDataがDataComponent内で呼び出された場合、あなたはthis.data = resなどの変数に代入して使用することをお勧めする私は私が私を示唆して自分のpurpose.Pleaseため{{getData}}のように使用するのに必要な{{data}} .Butが好き？

Answer 1

非同期呼び出しであるため、値を直接返すことはできません。 非同期呼び出しは、コードが実行されている間にバックグラウンドで実行されていることを意味します（後で実行するように実際にスケジュールされています）。

また、このようなコードをクラスに直接入れることはできません。メソッドまたはコンストラクタに移動する必要があります。あなたは何ができるか

は直接subscribe()にではなく、またmap()

export class DataComponent{ 
    someMethod() { 
     return this.http.get(path).map(res => { 
     return res.json(); 
     }); 
    } 
} 

のような演算子を使用し、あなたが同じ観測で複数の.mapを組み合わせることができますように、時にはこれは、コードの明瞭さを向上させ、別のものを保持します。例：

validateResponse = (response) => validate(response); 

parseJson = (json) => JSON.parse(json); 

fetchUnits() { 
    return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson); 
} 

この方法で観察できるが、発信者が、発信者はまた、別のクラスにすることができ

export class DataComponent{ 
    someMethod() { 
     return this.http.get(path).map(res => { 
     return res.json(); 
     }); 
    } 

    otherMethod() { 
     this.someMethod().subscribe(data => this.data = data); 
    } 
} 

を購読することができます戻るだろう。ここでは簡潔にしています。

data => this.data = data 

と

res => return res.json() 

矢印関数です。それらは通常の機能に似ています。これらの関数は、subscribe(...)またはmap(...)に渡され、応答からデータが到着したときにobservableから呼び出されます。 これは、someMethod()が完了すると、データがまだ受信されなかったため、データを直接返すことができない理由です。私の知っている

Answer 2

二つの方法：

export class SomeComponent implements OnInit 
{ 
    public localVar:any; 

    ngOnInit(){ 
     this.http.get(Path).map(res => res.json()).subscribe(res => this.localVar = res); 
    } 
} 

情報はちょうど約束のように返されたら、これはローカル変数にあなたの結果を割り当てます。それではあなただけです。{{ localVar }}

もう一つの方法は、localVariableとして観測可能なものを得ることです。

export class SomeComponent 
{ 
    public localVar:any; 

    constructor() 
    { 
     this.localVar = this.http.get(path).map(res => res.json()); 
    } 
} 

あなたがあなたのhtmlで行うことができ、その時点で、観察を暴露している。この方法では、AsyncPipe {{ localVar | async }}

を使用することです、それを試してみるとそれが動作するかどうか私に教えてください。また、角度2はかなり新しいので、何かが間違っているとコメントしてください。

希望します。

Answer 3

私はこの方法で多くの時間を使いました...

@Component({ 
 
    selector: "data", 
 
    template: "<h1>{{ getData() }}</h1>" 
 
}) 
 

 
export class DataComponent{ 
 
    this.http.get(path).subscribe({ 
 
     DataComponent.setSubscribeData(res); 
 
    }) 
 
} 
 

 

 
static subscribeData:any; 
 
static setSubscribeData(data):any{ 
 
    DataComponent.subscribeData=data; 
 
    return data; 
 
}

それがコーディング幸せ..あなたを助けることを願っています....あなたは、静的変数を使用するか、直接あなたがしたいオブジェクトを返すことができますここでも... staticキーワードを使用して、あなたの時間を節約できます。 ..