css - 是否可以在 ngClass 中传递 html 属性？

Question

我正在使用 Ionic，我在 myComponent.html 文件中有一个看起来像这样的 svg 路径:

 <path id="US" (click)="countryNameDetails($event)" title="United States" [ngClass]="{'BEEN' : array.indexOf('United States') !== -1, 'NOTBEEN' : array.indexOf('United States) === -1 }".../>

路径会根据我的数组中是否包含单词来更改 CSS 类。这个词基本上与每个路径的标题相同，我不想一直写出标题名称。无论如何我可以在我的 ngClass 的路径中传递 title 属性......我已经尝试了我能想到的一切!

谢谢!

Answer 1

您可以将模板引用变量添加到您的 svg 路径并访问 title 属性。

<path
  title="United States"
  [ngClass]="{'BEEN': array.indexOf(path.title) !== -1, 'NOTBEEN': array.indexOf(path.title) === -1 }"
  #path
/>

我更喜欢这种语法:

<path
  title="United States"
  [ngClass]="array.includes(path.title) ? 'been' : 'not-been'"
  #path
/>