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（值）和Label（文本）。这很好，因为该模块允许这样做。

要从中选择的项目数组。应该是具有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]="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演示了实际使用的功能。

Angular2映射对象属性

1 个答案: