我正在编写 Angular4 应用程序。我有一个包含值和管道类型的数组。 (地区、语言或数字)
const values = [
{ value: 'us', pipe: 'regions'},
{ value: 'en', pipe: 'language'},
{ value: '100', pipe: 'number'},
.....
];
我想制作一个 ngFor,这样我就可以显示值并应用正确的管道:(类似的东西)
<li *ngFor="let item of values"> {{item.value | item.pipe}} </li>
我尝试构建一个类:
export class FacetConfiguration {
value: string;
pipe: Pipe;
}
然后我将管道对象注入(inject)到类中。但它没有用。
有这样的方法吗?还是其他想法?
附言我这样做的原因是我有一个巨大的配置列表,每个配置都有不同的管道类型,所以硬编码会有点困难。
谢谢
最佳答案
我建议有一个主管道,它根据值决定应用哪个管道:
主管:
const values = [
{ value: 'us', pipe: new RegionPipe},
{ value: 'en', pipe: new LanguagePipe},
{ value: '100', pipe: new NumberPipe},
.....
];
在转换函数中:
trasform(value): any {
for(let val of values) {
if(val.value === value) {
return val.pipe.transform(value);
}
}
return '';
}
你也可以传递另一个管道作为你的主管道的一个选项:
@Component({
selector: 'my-app',
template: `
<div>
<h2>{{'some text'| main: test}}</h2>
</div>
`,
})
export class App {
name: string;
test = new TestPipe;
constructor() {
}
}
@Pipe({name: 'main'})
export class MainPipe implements PipeTransform {
transform(value: any, p: any): any {
return p.transform(value);
}
}
@Pipe({name: 'test'})
export class TestPipe implements PipeTransform {
transform(value: any): any {
return 'test';
}
}
关于angular - ngFor Angular2 中的动态管道,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45085909/