对于这个可能超级混乱的标题表示道歉,我不知道它是否与我想要做的完全准确。
我有一个组件,它将数据对象分配给变量,以便它们可以是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'
}
答案 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
演示了实际使用的功能。