Angular typescript

Question

Ich bin neu sowohl Angular 2 und Typoskript.

Dies ist meine Track-Komponente, wo ich die Spur von 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 {} 
} 

in diesen Leitungen

private releasedTrack: string = Moment. ("2013-03-10T02: 00: 00Z") Format ('DD-MM-YYYY'); private duration: string = moment (345678) .format ("m: ss");

Ich möchte {this.track} anstelle von hardcoded Wert übergeben.

This.track ist nicht definiert, (da es nicht verfügbar ist)

Wie kann ich das erreichen?

Dank

Answer 1

Scheint, wie this.track in ngOnInit initialisiert(). Es scheint mir, dass die Lösung nur this.track nach ihrer Initialisierung in ngOninit() passieren soll. Ich gehe davon aus auf die folgende Weise:

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

this helps :)

Edit:

Zur weiteren Erläuterung der Initialisierung Ihrer releasedTrack Variable vor ngOnInit geschieht(), dh bevor die App hat voll aufgeladen. Darüber hinaus rufen Sie einen Service this.trackService.getAll(), der eine Zusage zurückgibt. Dies bedeutet, dass die Methode asynchron ausgeführt wird und nicht garantiert, dass sie vor der Ausführung der Zeile beendet wird. Beispiel:

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

Deshalb sollten Sie die .subscribe Methode verwenden, um Funktionen zu definieren, die fertig nach dem .getAll() -Methode ausgeführt werden sollen. Sie definieren nämlich die sogenannten Pfeilfunktionen im Format (variable) => action, wobei Variable der Rückgabewert der zuvor ausgeführten Funktion ist.

Answer 2

Try flatMap Operator, wenn Sie Daten planen senden von einer beobachtbaren an den anderen

Answer 3

Also dachte ich, wie onComplete zu verwenden, nachdem die beobachtbare abgeschlossen hat. Die Funktion zeichnen drei Parameter: OnNext onError OnCompleted

ich diese neu geschrieben:

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

} 

und es funktioniert!