Перевести динамические значения с угловым 5

У меня есть файл перевода json для английского и один для немецкого.

Они выглядят так

ru.json

"COLORS": {
        "BLUE": "Blue",
        "RED": "Red",
        "GREEN": "Green"
}

то же самое для немецкого.

У меня есть объект человека, и он имеет цвета массива []. Человек может иметь синий и красный цвета. Тогда это будет выглядеть так:

person.colors[0] = "BLUE";
person.colors[1] = "RED";

Как видите, я сохранил в массиве ключи переводов, а не значения.

Теперь я перебираю цвета человека, например:

<div *ngFor="let color of person.colors">
    <p>{{'COLORS.color' | translate}}</p>
</div>

Но я не получаю выход. В чем может быть проблема?

Я уже просмотрел этот пост angular-translate: перевести динамическое значение, но это не так. Помоги мне.