websemantics / awesome-ant-design

A curated list of Ant Design resources and related projects. The main idea is that everyone can contribute here, so we can have a central repository of informations about Ant Design that we keep up-to-date
http://ant.design/
Other
3.13k stars 215 forks source link

可以在 nzLabel 使用 pipe吗? #72

Open jsnhsu opened 2 years ago

jsnhsu commented 2 years ago

我需要使用 nz-select 的 nz-option 时, 将 enum 枚举出来, 放在 nzValue / nzLabel 上, 但是 nzLabel 我想显示中文, 比方:

export enum MyType { Public = 0, Private = 1 } // 希望能在 Label 显示为 "公开, 私有"

<nz-option ngFor="let x of this.MyTypeList" [nzValue]="x" [nzLabel]="this.Convert(x)"> <nz-option ngFor="let x of this.MyTypeList" [nzValue]="x">{{ x | myTypePipe }}

ngFor 都没问题, nzValue 也正确 (0, 1). 但是 nzLabel 用了以上两种方法都无法正确. 其中第一种方式 -> 另外做一个 Convert function, 貌似根本编译不过, (试过用 member funciton 也试过用 static function 都不行) 第二种方法能过 但是下拉选单中看不到 Label. (产生的 option 的数量正确, 但是就是看不见. 貌似所有的 Label 都是空字符串, 但事实上在 pipe 中用 console.log 检查过都有正确转换)

再补充一点, 若不考虑转换成中文, nz-option 的 nzValue: 0, 1 以及 nz Label 显示 Public, Private 都没问题 若是定义成 export enum MyType { Public = '公开', Private = '私有' } 也能显示出中文, 但是 value 就不再是 0/1. 而且与数据库相关, 我需要保持使用的都是 0/1 以及 Public/Private

jsnhsu commented 2 years ago

算是已解决, 虽不是使用 Pipe 的方式, 而是仿 MyTypeList 的方式写个 enum 对描述的 mapping get MyTypeListC(): string[] {return ['公开','私有']; }

当然此解法的缺陷是, enum 的顺序 (给定的 number 值) 与放进翻译的数组, 得是完全正确对应. 当然并未尝试过用 i18n 的方法去解, 因为感觉没地方放 pipe