javascript - Angular:ngFor 中重复项的条件类

Question

有密码

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

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

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

正确吗？

是否可以修改此代码，使 duplicate 类应用于任何重复项，而不仅仅是与 第 0 项进行比较

Answer 1

您可能想要向您的 Controller 添加一个功能。我的 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是为了防止在当前颜色在数组中发现自己时将其标记为重复颜色。