2

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.

Mark Sandman
  • 3,043
  • 11
  • 35
  • 53

1 Answers1

0

Inputs are not yet set when the constructor is called. Use the ngOnInit() lifecycle callback instead.

ngOnInit() {
    // how do I apply a switch or a check to modify the profile.visitorType
    this.profile.map((x) => {
        console.log(x);
    })
}
Günter Zöchbauer
  • 490,478
  • 163
  • 1,733
  • 1,404
  • That's great thanks... but I get that ' this.profile.map' is not a function even though I have imported the map operator. I just want to do a simple if/then or a Switch statement on the value... is map the correct operator? – Mark Sandman Jan 03 '17 at 08:56
  • Hard to tell. Your question doesn't contain any information (code) that demonstrates where `profile` comes from `[profile]="..."`. You could try `ngOnChanges(changes)` instead of `ngOnInit()` and add a check `if(changes['profile']) { this.profile.map...; }` – Günter Zöchbauer Jan 03 '17 at 09:01
  • Sorry, I will add that to the question, but I add my component into another compnent and pass the date throuh the HTML template like so ´´ – Mark Sandman Jan 03 '17 at 11:49
  • You are passing an object. `Object` doesn't have a map function http://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays. Perhaps you want `this.profile.keys.map(...)` or similar – Günter Zöchbauer Jan 03 '17 at 11:54