Как установить цвет в элементе div, используя привязку свойства с Angular 4 - PullRequest
Новая
       36

Как установить цвет в элементе div, используя привязку свойства с Angular 4

0 голосов
/ 22 ноября 2018

У меня есть следующий объект 

 public countries= [
    {code: 'AE' , country_name: 'United Arab Emirates', color: '#eea638'},
    {code: 'AF' , country_name: 'Afghanistan', color: '#eea638'},
    {code: 'AL' , country_name: 'Albania', color: '#eea638'},
    {code: 'AM' , country_name: 'Armenia', color: '#eea638'},
    {code: 'US' , country_name: 'United State',color: '#eea638'},
    {code: 'AR' , country_name: 'Argentina', color: '#eea638'},
    {code: 'AT',  country_name: 'Austria', color: '#eea638'},
    {code: 'AU',  country_name: 'Australia', color: '#eea638'}
]

Так что я бы хотел установить цвет div динамически на основе этого списка объектов.Я пытался сделать это: 

<div *ngFor="let country of countries">
    <p class="m-b-10">{{country.country_name}} 
        <span class="f-right">{{country.code}}</span>
    </p>
    <div class="progress">
        <div class="progress-bar" ng-style="{'background-color': country.color}" [style.width]="'75%'"></div>
   </div>

Но это не работает.Не могли бы вы помочь мне?

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Высота Div отсутствует. 

   <div class="progress">
        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>
   </div>
0 голосов
/ 22 ноября 2018

В вашей реализации есть две проблемы :

  1. Вы использовали ng-style, который использовался в AngularJS (1.x).Но поскольку вы работаете с Angular (2+), используйте [ngStyle] вместо ng-style.

  2. У вашего div нет содержимого,Кроме того, он просто имеет width, а не height.Еще одна вещь, на которую следует обратить внимание, это то, что, поскольку вы используете [ngStyle], вы можете использовать атрибуты width и height прямо здесь, вместо создания другой привязки атрибута [style.width] или [style.height].

Попробуйте исправить это: 

<div *ngFor="let country of countries">
  <p class="m-b-10">{{country.country_name}}
    <span class="f-right">{{country.code}}</span>
  </p>
  <div class="progress">
    <div 
      class="progress-bar" 
      [ngStyle]="{ 'background-color': country.color, 'width': '75%', 'height': '50px'}">
    </div>
  </div>
</div>

Вот пример ПримерStackBlitz для вашей ссылки.

...