Angular2映射对象属性

时间:2017-07-18 18:27:48

标签: angular typescript

对于这个可能超级混乱的标题表示道歉,我不知道它是否与我想要做的完全准确。

我有一个组件,它将数据对象分配给变量,以便它们可以是typecast。我为此目的创建了接口:

export interface Role {
    RoleID: number;
    RoleName: string;
}

export interface Language {
    LanguageID: number;
    LanguageName: string;
}


...

roles: Role[] = [];
languages: Language[] = [];

我正在使用名为ng-select的npm模块,它为选择输入添加了一些扩展功能。

我的HTML设置如下:

<ng-select 
 [allowClear]="true"
 [items]="roles"
 placeholder="No role selected">
</ng-select>

我的所有选择输入都使用ID(值)和Label(文本)。这很好,因为该模块允许这样做。

  

要从中选择的项目数组。应该是具有id和text属性的对象数组。

我的问题如下:此模块需要的对象需要属性名称为idtext。由于我正在输入接口的输入,我无法在那里重命名它们。

是否有任何关于我如何映射这些数据的建议,我可以提供模块我的对象,并说RoleID = idRoleName = text

简而言之,我目前的目标是:

{
    RoleID: 123,
    RoleName: 'Admin'

}

需要:

{
    id: 123,
    text: 'Admin'

}

1 个答案:

答案 0 :(得分:5)

您可以将[items]属性绑定到使用Array.prototype.map返回已转换对象数组的组件类的方法:

<强> HTML:

<ng-select 
 [allowClear]="true"
 [items]="getRoles()"
 placeholder="No role selected">
</ng-select>

<强> TS:

getRoles(): any[] {
    return this.roles.map((role: Role) => {
        return { id: role.RoleID, text: role.RoleName };
    });
}

更新:这是一个plunker,通过一个简单的列表和ngFor演示了实际使用的功能。