Angular2映射对象属性

Question

为这个可能超级混乱的标题道歉，我不知道它是否与我正在尝试做的完全准确。

我有一个组件将数据对象分配给变量，以便它们可以是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（值）和标签（文本）。这很棒，因为该模块允许这样做。

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

我的问题如下：该模块需要的对象需要属性名称为id 和text。由于我是在界面中输入我的输入，因此我无法在其中重命名它们。

对于我如何映射这些数据有什么建议吗？例如，我可以提供模块我的对象并说RoleID = id 和RoleName = text。

简而言之，我目前的对象是：

{
    RoleID: 123,
    RoleName: 'Admin'

}

需要：

{
    id: 123,
    text: 'Admin'

}

Answer 1

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

HTML：

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

TS：

roleItems: Role[] = [];

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

更新：这是一个plunker，通过一个简单的列表和ngFor展示了实际功能。