Angular typingcript

Question

我是Angular 2和打字稿的新手。

這是我的跟蹤組件，我從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'）; private duration：string = moment（345678）.format（「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()，它返回一個承諾。這意味着該方法將異步執行，並且不保證它在執行之後的行之前完成。例如：

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

那就是爲什麼使用.subscribe方法來定義其是完成了.getAll（）方法之後所要執行的功能。也就是說，您可以使用格式(variable) => action定義所謂的箭頭函數，其中變量是先前執行的函數的返回值。如果你打算從一個可觀察到其他

Answer 2

嘗試flatMap運營商所以我如何使用的onComplete可觀察完成後。 的訂閱功能有三個參數： onNext 的onError onCompleted

我改寫了這個：

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(); 

} 

和它的作品！

Answer 3

發送數據