I have to admit I know very little about Angular2 and Observables... so I am coming back to Stackoverflow for help.
I have a component like so:
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
}
}
the html of the component, './profile-visitor.component.html'
looks like so...
<div *ngIf="profile">
Visited from {{ profile.visitType }} at {{ profile.visitDate | date }}
</div>
here is the type I created that is in './profile-visitor';
export interface ProfileVisitor {
visitorType: string;
visitorDate: string;
}
Now this is all great but I need to perform some kind modification on the visitorType
property, I assume I need to do this in the ProfileVisitorComponent constructor()
. For example if visitType
could be "search", "suggestedLink", "refererFromContact" and I need to make the wording a little better. So if visitorType was "suggestedLink" I would return "Suggested Link" or when it is "refererFromContact" I would return "Reference from mutual friend" and so on... normally I would just apply some kind of Switch case in the component / controller (I am more of an AngularJS guy) when I get the date from the backend... but with Angular2 and Observables I am a little in the dark.
Even when I try to console.log(this.profile.visitorType)
in the constructor I get the message that the item is undefined. This is true when I try to use map with the this.profile.visitorType
too for example
constructor() {
// how do I apply a switch or a check to modify the profile.visitorType
this.profile.map((x) => {
console.log(x);
})
}
In the console....
Cannot read property 'map' of undefined
... can anyone tell me where and how I should apply a transform on the values I am given for the profile.visitorType
?
I pass the data by having my component nested in a parent component and the @Input is on the HTML... for example
<app-profile-visitor [profile]="{ 'visitDate': visitorEntry.visitDate, 'visitType': visitorEntry.visitType }"></app-profile-visitor>
Thanks in advance and if I haven't explained myself well please say so and I will rewrite / explain my problem.