Question

我必须承认我对Angular2和Observables知之甚少......所以我回到Stackoverflow寻求帮助。

我有一个像这样的组件：

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，'./profile-visitor.component.html'看起来像......

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

这是我在'./profile-visitor';

中创建的类型

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

现在这很好但我需要对visitorType属性进行一些修改，我假设我需要在ProfileVisitorComponent constructor()中执行此操作。例如，如果visitType可能是“搜索”，“suggestedLink”，“refererFromContact”，我需要使措辞更好一些。因此，如果visitorType是“suggestedLink”，我会返回“推荐链接”，或者当它是“refererFromContact”时，我会返回“来自共同朋友的参考”等等...通常我会在组件中应用某种Switch案例/当我从后端得到日期时，控制器（我更像是一个AngularJS家伙）......但是对于Angular2和Observables，我有点黑暗。

即使我在构造函数中尝试console.log(this.profile.visitorType)，我也会收到项目未定义的消息。当我尝试使用带有this.profile.visitorType的地图时也是如此

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

在控制台......

Cannot read property 'map' of undefined

...任何人都可以告诉我应该在哪里以及如何对profile.visitorType给出的值进行转换？

我通过将我的组件嵌套在父组件中并且@Input在HTML上来传递数据...例如

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

先谢谢，如果我没有解释好自己，请说出来，我会重写/解释我的问题。

Answer 1

调用构造函数时尚未设置输入。请改用ngOnInit()生命周期回调。

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

转换Angular2组件中的@Input值：无法读取未定义

1 个答案: