angular - Transformerar @Input-värde i Angular2-komponent: Kan inte läsa egenskapen 'map' av undefined

Jag måste erkänna att jag vet mycket lite om Angular2 och Observables... så jag återvänder till Stackoverflow för hjälp.

Jag har en komponent som så:

import { Component, Input } from '@angular/core';
import { ProfileVisitor} from './profile-visitor';
import { Observable } from 'rxjs/Rx';

@Component({
  selector: 'app-profile-visitor',
  templateUrl: './profile-visitor.component.html',
  styleUrls: ['./profile-visitor.component.scss']
})
export class ProfileVisitorComponent  {
    @Input() profile: Observable<ProfileVisitor>;

    constructor() {
        // how do I apply a switch or a check to modify the profile.visitorType
    }
}

HTML-koden för komponenten, './profile-visitor.component.html' ser ut så här...

<div *ngIf="profile">
    Visited from {{ profile.visitType }} at {{ profile.visitDate | date }}
</div>

här är typen jag skapade som finns i './profile-visitor';

export interface ProfileVisitor {
    visitorType: string;
    visitorDate: string;
}

Nu är allt detta bra, men jag behöver göra någon slags modifiering på visitorType-egenskapen, jag antar att jag behöver göra detta i ProfileVisitorComponent constructor(). Till exempel om visitType kunde vara "search", "suggestedLink", "refererFromContact" och jag behöver göra formuleringen lite bättre. Så om visitorType var "suggestedLink" skulle jag returnera "Suggested Link" eller när det är "refererFromContact" skulle jag returnera "Reference from mutual friend" och så vidare... normalt skulle jag bara använda någon slags Switch-case i komponenten/controllern (jag är mer en AngularJS-person) när jag får datan från backend... men med Angular2 och Observables är jag lite osäker.

Även när jag försöker console.log(this.profile.visitorType) i konstruktorn får jag meddelandet att objektet är odefinierat. Detta är sant även när jag försöker använda map med this.profile.visitorType också till exempel.

constructor() {
        // how do I apply a switch or a check to modify the profile.visitorType
        this.profile.map((x) => {
            console.log(x);
        })
    }

I konsolen....

Cannot read property 'map' of undefined

... kan någon berätta för mig var och hur jag ska applicera en transformering på de värden jag får för profile.visitorType?

Jag skickar vidare data genom att ha min komponent inbäddad i en föräldrakomponent och @Input finns på HTML... till exempel

<app-profile-visitor [profile]="{ 'visitDate': visitorEntry.visitDate, 'visitType': visitorEntry.visitType }"></app-profile-visitor>

Tack på förhand och om jag inte har förklarat mig väl, var snäll och säg det så kommer jag att skriva om/förklara mitt problem.

Svar #1

Inmatningar är ännu inte inställda när konstruktören anropas. Använd istället ngOnInit()-livscykelcallbacken.

ngOnInit() {
    // how do I apply a switch or a check to modify the profile.visitorType
    this.profile.map((x) => {
        console.log(x);
    })
}