如何使用属性与 Angular 绑定在 div 元素中设置颜色 4

Question

我有关注对象

 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>

但它不起作用。你能帮帮我吗？

Answer 1

您的实施存在两个问题：

您使用了 ng-style，它曾在 AngularJS(1.x) 中使用过。但是由于您正在使用 Angular(2+) 使用 [ngStyle] 而不是 ng-style.
您的 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>

这里有一个 Sample StackBlitz 供您参考。

Answer 2

Div身高缺失。

   <div class="progress">
        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>
   </div>

如何使用属性与 Angular 绑定在 div 元素中设置颜色 4

How to set color in div element using property binding with Angular 4

property-binding

angular

如何使用 属性 与 Angular 绑定在 div 元素中设置颜色 4

How to set color in div element using property binding with Angular 4

property-binding

angular

如何使用属性与 Angular 绑定在 div 元素中设置颜色 4