1

我有跟随对象

 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>

但它不起作用。请你帮助我好吗？

4

2 回答 2

3

您的实现有两个问题：

  1. 您已经使用ng-style了 AngularJS(1.x) 中使用的那个。但是由于您使用的是 Angular(2+) ，所以使用[ngStyle]而不是ng-style.

  2. 你的div没有内容。此外，它只是有width和没有height。这里要指出的另一件事是，由于您使用[ngStyle]的是 ，因此您可以在此处使用widthandheight属性，而不是创建另一个[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。

于 2018-11-22T12:37:43.690 回答
1

缺少 div 高度。

   <div class="progress">
        <div class="progress-bar" [ngStyle]="{'background-color': country.color}" style="width:75%; height:25px" ></div>
   </div>
于 2018-11-22T12:43:42.903 回答