角型コピー

Question

私はAngular 2とtypescriptの両方が新しくなりました。

これは私のトラックコンポーネントで、私はAPIからトラックを取得します。これらの行では

import { Component, ViewEncapsulation, OnInit, OnDestroy } from 
     '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 

import * as moment from 'moment'; 


import { TrackService } from './track.service'; 
import { Track } from './track.model'; 
import { Response } from '@angular/http'; 


@Component({ 
    selector: 'da-article', 
    templateUrl: './track.html', 
    styleUrls: ['./track.scss'], 
    encapsulation: ViewEncapsulation.Emulated, 
    providers: [TrackService] 
}) 
export class TrackComponent implements OnInit, OnDestroy { 
    private track: Track; 
    private error: Response; 
    private isLoading: boolean = true; 
    private releasedTrack: string = moment("2013-03-10T02:00:00Z").format('DD-MM-YYYY'); 
    private duration: string = moment(345678).format("m:ss"); 


    constructor(
     private route: ActivatedRoute, 
     private trackService: TrackService 
     ) { 

    } 


    ngOnInit(): void { 
     let TrackId = this.route.snapshot.params['trackId']; 

     this.trackService.getAll().subscribe(
      (data) => this.track = data[TrackId], 
      (error) => this.error = error, 
      ()  => this.isLoading = false 
      ); 

    } 


    ngOnDestroy(): void {} 
} 

プライベートreleasedTrack：文字列=モーメント（ "2013-03-10T02：00：00Z"）フォーマット（ 'DD-MM-YYYY'）。 プライベート期間：文字列=モーメント（345678）。形式（ "m：ss"）;

ハードコードされた値の代わりに{this.track}を渡します。

This.trackは

どのように私はこれを達成することができます（それが利用できないように）、定義されていませんか？

おかげ

Answer 1

はthis.trackのように思える）（ngOnInitに初期化されます。解決策は、ngOninit（）で初期化したあとにthis.trackを渡すだけです。私は次のように想定しています

this.trackService.getAll().subscribe(
     (data) => this.track = data[TrackId], 
     (error) => this.error = error, 
     ()  => this.isLoading = false, 
     ()  => this.track //it should now have value different from undefined 
     ); 

・ホープ、このことができます:)

編集：

をさらに説明するために、あなたのreleasedTrack変数の初期化は、（ngOnInit前に発生）、アプリがあり、すなわち前に完全にロードされます。その上に、約束を返すサービスthis.trackService.getAll()を呼び出しています。これは、メソッドが非同期に実行されることを意味し、それが実行される前に終了することを保証するものではありません。例：あなたが完了し.getAll（）メソッドの後に実行される関数を定義する.subscribeメソッドを使用している理由

this.trackService.getAll().subscribe(
        ... 
     ) 
this.track; // this might be undefined, since this.trackService.getAll() might not have finished 

。つまり、(variable) => actionという形式の矢印関数を定義します。変数は、以前に実行された関数の戻り値です。あなたが他の

Answer 2

するTry flatMap演算子は、だから私は、観察が完了した後onCompleteの使用方法を考え出しました。

public getDuration(){ 
    return moment(this.track.trackTimeMillis).format("mm:ss"); 
} 


public getReleaseDate(){ 
    return moment(this.track.releaseDate).format("DD-MM-YYYY"); 
} 

ngOnInit(): void { 
    let TrackId = this.route.snapshot.params['trackId']; 

    this.trackService.get(TrackId).subscribe(
     (data) => this.track = data, 
     (error) => this.error = error, 
     () => { this.duration = this.getDuration(), 
      this.releasedDate = this.getReleaseDate(), 
      this.isLoading =false}, 

      ); 

    this.chooseRandomTracks(); 

} 

、それは動作します：私はこれに書き直し onNext のonError onCompleted

： 購読機能は3つのパラメータを取ります！

Answer 3

に観察可能なものからのデータを送信する予定がある場合