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

发送数据