Angular：条件 class 用于 ngFor 中的重复项

Question

有密码

<li *ngFor="let color of colors;" [class.duplicate]="color.hex == colors[0].hex">{{color.hex}}<li>

根据颜色列表的颜色对象的十六进制属性填充十六进制代码列表。

因此，上面的 duplicate class 被分配给十六进制与 第 0 项的十六进制相同的任何项目。

正确吗？

是否可以修改此代码，以便 duplicate class 应用于任何重复项，而不仅仅是与 0th 项目

进行比较

Answer 1

您可能想要向您的控制器添加一个功能。我的 Angular2+ 生锈了，但效果如下：

<li *ngFor="let color of colors;" [class.duplicate]="findDuplicate(index, color)">{{color.hex}}<li>

function findDuplicate(index, color){
    return colors.find((checkColor, checkIndex) => {
        let isDuplicate = (checkIndex != index) && (color.hex == checkColor.hex);
        return isDuplicate;
    });
}

注意：checkIndex != index 是为了防止在当前颜色在数组中发现自己时将其标记为重复项。

Angular：条件 class 用于 ngFor 中的重复项

Angular: conditional class for duplicates within ngFor

javascript

arrays

duplicates

ngfor

angular