Question

我试图更新来自数据库的数据数组上的多个圆条。这是我的HTML：

<div class="row pie-charts">    
  <ba-card *ngFor="let goal of pGoal; let i = index"  class = "pie-chart-item-container col-xlg-3 col-lg-3 col-md-6 col-sm-12 col-xs-12">
     <div class="pie-chart-item">
      <div class = "pie-chart-item">
        <div class="circle-{{i}}"></div>
      </div>
    </div>
     <div class="description">
        <div>{{ goal.Name }}</div>
        <div class="description-stats">{{ goal.GoalDescription }}</div>
      </div>
      <i class="chart-icon i-person"></i>
  </ba-card>
</div>

这是我的角度代码：

ngOnInit() {
      this._personalgoalsService.getGoalSummary()
        .subscribe( result => {
          this.pGoal = result;
         jQuery('.circle-0').circliful({
         percent: 33
       });
      jQuery('.circle-1').circliful({
         percent: 88
        });
      })
  }

如果我在运行circliful（或任何其他js图表）时对类名进行硬编码，则它们都会使用相同的值进行更新。必须有简单的方法来创建具有不同值的相同类名的多个对象。所以我尝试使用ngFor并添加 - 索引号。看来当我在html中动态创建一个类或id时，它并没有在dom中正确创建，然后我无法在js中找到它。

谢谢，

编辑：基本上我试图更新相同的＆＃34;元素＆＃34;有不同的价值观。我不确定如何创建具有不同值的相同类型的多个圆形图。

<div class="row pie-charts">  
  <circle *ngFor="let goal of goals | async" [goal]="goal"></circle> 
</div>

所以我创建了一个组件并传入了我的目标对象。但我仍然没有获得创建圆圈的独特元素。实际上我的目标数组是2，但我得到的4个图表使用相同的默认值绘制。

然后我创建了一个CircleDirective：

@Directive(
  {
    selector: '[myCircle]'
  }
)

export class CircleDirective implements OnInit{
  @Input() goal : iPersonalGoalModel;
  private el: HTMLElement;
  constructor(el: ElementRef) {
    this.el = el.nativeElement;
  }
  ngOnInit() {

    jQuery(this.el).circliful({
      percent : this.goal.GoalCompletionPercentage
    });
  }

}

@Component({
  selector: 'circle',
  encapsulation: ViewEncapsulation.None,
  directives: [CircleDirective],
  providers: [],
  styles: [require('./circle.css')],
  template: require('./circle.html')
})

export class CircleComponent implements OnInit {

    @Input() goal : iPersonalGoalModel;

    ngOnInit() {
      console.log(this.goal.GoalCompletionPercentage);
    }
}

所以现在我的组件正在使用circle指令。该指令在circle.html中调用。

<div myCircle
    class="circle" 
    [goal]="goal"
    data-dimension="250" 
    data-info="Sweet" 
    data-width="30" 
    data-fontsize="38" 
    data-fgcolor="#61a9dc" 
    data-bgcolor="#eee" 
    data-fill="#ddd" 
    data-total="100" 
>
</div

请注意这里的两件事。我使用myCircle属性，并且我将目标传递给circle指令。我知道有一些方法可以清理它，但这有效。它只显示两个圆形图和两个正确的值。

令人沮丧的是，我知道问题是什么，但我跑来跑去解决问题。现在的问题是针对相同问题的多种解决方案本质上是简单的。我希望这有助于将来的某个人。

Angular2

0 个答案: