如何根据角度7中的条件设置属性值

Question

我一直在尝试根据条件为data-color标签设置<li>属性值。这是我需要检查的数据的示例数组：

{
Notifications: [
{
notification: "Example Notification",
notification_type: 1
},
{
notification: "Example Notification 2",
notification_type: 2
},
{
notification: "Example Notification 2",
notification_type: 3

]
}

这是我要接收的数组，我需要根据通知类型设置<li>标签的数据颜色。

这是我的<li>标签：

<li class="feed-item" *ngFor= "let notification of Notificationslist" data-content="&#xf00c;" data-color="green">

我需要根据通知类型将data-color设置为green,red and yellow，有人可以帮助我如何实现这一点。谢谢。

Answer 1

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

您最好创建一个新的CSS类，并按上述方式有条件地对其进行样式设置。

https://angular.io/api/common/NgClass

Answer 2

使用

<li [attr.data-color]="notification.color">

如果要进行一些计算以获得颜色，请使用类似如下的方法：

<li [attr.data-color]="getColorForNotification(notification)">

getColorForNotification(notification: Notification) {
  switch (notification.notification_type){
    case 1:
     return 'green';
    default:
     return 'red'
  }
}

Answer 3

最干净的方法是向对象添加color属性，然后在模板中使用它。

例如：{ notification: "Example Notification", notification_type: 1, color: 'red' },

<li class="feed-item" *ngFor= "let notification of Notificationslist" data-content="&#xf00c;" [data-color]="notification.color">