我设法让某些东西起作用,虽然有点肮脏和邪恶(使用 eval),但对我来说这很管用。在我的情况下,我有一个包含不同数据类型的表格组件,每行都有不同的数据类型(例如标题、网址、日期、状态)。在我的数据库中,状态标记为 1
表示 启用
或 0
表示 禁用
。当然,向用户显示已启用或已禁用更为可取。此外,我的标题列是多语言的,因此它是一个带有 en
或 id
作为键的对象。
title: {
"en": "Some title in English",
"id": "Some title in Indonesian"
},
status: 1
理想情况下,我需要2个不同的管道将我的数据转换为适合于应用程序用户查看的格式。例如像
translateTitle
和
getStatus
这样的内容就可以了。我们称父级管道为
dynamicPipe
。
{{ title | dynamicPipe:'translateTitle' }}
{{ status | dynamicPipe:'getStatus' }}
@Pipe({name:'dynamicPipe'})
export class DynamicPipe implements PipeTransform {
transform(value:string, modifier:string) {
if (!modifier) return value;
return eval('this.' + modifier + '(' + value + ')')
}
getStatus(value:string|number):string {
return value ? 'enabled' : 'disabled'
}
translateTitle(value:TitleObject):string {
return value[defaultSystemLanguage]
}
}
我可能会因为使用eval而受到很多批评。希望它能有所帮助!
更新:何时可能需要它
posts = {
content: [
{
title:
{
en: "Some post title in English",
es: "Some post title in Spanish"
},
url: "a-beautiful-post",
created_at: "2016-05-15 12:21:38",
status: 1
},
{
title:
{
en: "Some post title in English 2",
es: "Some post title in Spanish 2"
},
url: "a-beautiful-post-2",
created_at: "2016-05-13 17:53:08",
status: 0
}
],
pipes: ['translateTitle', null, 'humanizeDate', 'getStatus']
}
<table>
<tr *ngFor="let row in posts">
<td *ngFor="let column in row; let i = index">{{ column | dynamicPipe:pipes[i] }}</td>
</tr>
</table>
将返回:
| title | url | date | status |
| Some post t... a-beautiful... an hour ago enabled
| Some post ...2 a-beautifu...2 2 days ago disabled