title: Translate dynamic values with angular 5
body: <p>I have a json translation file for english and one for german.</p>
  
  <p>They look like this</p>
  
  <p><strong>en.json</strong></p>
  
  <pre><code>"COLORS": {
          "BLUE": "Blue",
          "RED": "Red",
          "GREEN": "Green"
  }
  </code></pre>
  
  <p>same for the german one.</p>
  
  <p>I have a person object and this has an array colors []. A person could have the colors blue and red. Then it would look like this:</p>
  
  <pre><code>person.colors[0] = "BLUE";
  person.colors[1] = "RED";
  </code></pre>
  
  <p>As you can see, I saved the keys of the translations in the array and not the values.</p>
  
  <p>Now I'm looping through the person's colors like:</p>
  
  <pre><code>&lt;div *ngFor="let color of person.colors"&gt;
      &lt;p&gt;{{'COLORS.color' | translate}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But I'm getting no output. What could be the problem?</p>
  
  <p>I already looked at this post <a href="https://stackoverflow.com/questions/35223457/angular-translate-translate-dynamic-value">angular-translate: Translate dynamic value</a> but it didn't help me.</p>