Question

说我已经注册了一组自定义icons：

iconRegistry
    .addSvgIcon('one', sanitizer.bypassSecurityTrustResourceUrl('images/one.svg'))
    .addSvgIcon('two', sanitizer.bypassSecurityTrustResourceUrl('images/two.svg'))
    .addSvgIcon('three', sanitizer.bypassSecurityTrustResourceUrl('images/three.svg'));

我想在图标库页面中呈现它们。如何访问*ngFor结构中的注册表数据，例如？

Answer 1

假设您已按照建议在构造函数中构建了iconRegistry：

<强> component.ts

iconList = [];

ngOnInit() {
  this.iconRegistry['_svgIconConfigs'].forEach( (value, key) => {
    this.iconList.push(key.slice(1));
  });
}

<强> component.html

<md-icon *ngFor="let iconName of iconList" [svgIcon]="iconName"></md-icon>

这里有一个带有demo svg的plunker来显示它的实际效果。

Answer 2

如果你能以某种方式将图标名称列表保存到组件内的数组中，那么你可以像这样在模板中循环它，

成分</ P>

let p1 = Player(id: "a")
let p2 = Player(id: "a")

print(p1 == p2) // true
print(p1 != p2) // false

// Native Swift set:
let set = Set([Player(id: "x"), Player(id: "y"), Player(id: "z")])
print(set.contains(Player(id: "y"))) // true

// Foundation set:
let nsset = NSSet(objects: Player(id: "x"), Player(id: "y"), Player(id: "z"))
print(nsset.contains(Player(id: "y"))) // true

模板

iconList = ['one', 'two', 'three'];

修改

根据评论中的建议，您可以从列表开始使用<md-icon *ngFor="let iconName of iconList" [svgIcon]="iconName"></md-icon>方法注册这些图标。

成分</ P>

addSvgIcon

如何迭代并在Angular的iconRegistry中显示图标？

2 个答案: