Question

我正在开发一个项目并使用GoogleChart。但是当我用* ngFor实现这个GoogleChart指令时，只有一个实例正在创建，尽管应该有GoogleChart的4个实例。我不知道为什么只创建一个图表，应该有4个图表，因为在<h2>Employee's Attendence Profile:</h2> <div *ngFor="let member of chartObject; let i=index" > <div class="col-md-6" [chartData]="member.data" id="i" [chartOptions] = "member.options" chartType="PieChart" GoogleChart> </div> </div>中有4个元素。

我的代码是：

个人资料-component.html：

import { Component, OnInit, HostBinding, Input }         from '@angular/core';
import { Router, ActivatedRoute }                 from '@angular/router';
import { slideInDownAnimation }                  from '../../animations/animations'
import { GoogleChart}                             from'../../../../directives/angular2-google-chart.directive';
import { ProfileService                         } from '../../services/profile-component.service';
declare var bootbox: any;
@Component({
  selector: 'profile-component2',
  templateUrl: `../app/modules/dashboard/dashComponents/profileComponents/profile.component.html`,
  animations: [slideInDownAnimation],
  styles: [`
    .chart-css{
      height:400px;width:400px;border:0px solid red;flot:left;
    }
    `]
})

export class ProfileComponent2 implements OnInit {
  constructor(private profileService: ProfileService) { }
  name = "Shubham";
  message: string;
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';
  @HostBinding('style.position') position = 'absolute';
  public login: {} = {};
  private interval: any;
  private members: any;
  private totalMemberWithLeaves: number;

  public chartObject = new Array<any>();

  ngOnInit() {
    console.log("profile/Home component2 initialized");
    this.getAttendanceDetails();
  }

  getAttendanceDetails() {
    this.profileService.getAttendanceDetails().subscribe(
      (res) => {
        let totalMembersId = [];
        this.members = res.json();
        this.members.filter((element: any) => {

          if(totalMembersId.indexOf(element.userId) == -1)
          totalMembersId.push(element.userId);
        });
        this.totalMemberWithLeaves=totalMembersId.length;
        console.log("Total Member with leaves: ", this.totalMemberWithLeaves);


        totalMembersId.forEach((element: any) => {

          let chartDataforEachMembers = new Array<any>();
          let Task = ['Task', 'Hours per Day'];
          let present =['Present', 12];
          let earnedLeaves = ['Earned Leaves', 23];
          let Unplanned = ['Unplanned Leaves', 2];
          chartDataforEachMembers.push(Task,present,earnedLeaves,Unplanned);

          let memberObject={data   :[Task,present,earnedLeaves,Unplanned],
                            options:{
                                      title: element,
                                      width: element+500,
                                      height: element+500
                                    }};
          this.chartObject.push(memberObject);

        });
         console.log("chartObject : ",this.chartObject);
      }, (err) => {
        bootbox.alert("Error");
      }
    )
  }
}

个人资料-component.ts：

chartObject

在我的Array ( [0] => stdClass Object ( [item_variation_id] => 2 [item_index] => 3146 [rothco_item_no] => 10002 [upc] => 023063601212 [inventory] => 99 [created_date] => 2014-11-28 10:06:45.000 [weight] => .4000 [image_filename] => 10002-A.jpg [catalog_page_no] => 183 [msrp] => 20.9900 [map] => .0000 [diameter] => [price] => 8.100000 [case_price] => [case_quantity] => [statuses] => ) [1] => stdClass Object ( [item_variation_id] => 5 [item_index] => 2654 [rothco_item_no] => 10005 [upc] => 023063100227 [inventory] => 99 [created_date] => 2002-04-21 21:00:00.000 [weight] => .1500 [image_filename] => 10005-A.jpg [catalog_page_no] => 183 [msrp] => 10.9900 [map] => .0000 [volume] => 22 Grams [price] => 4.200000 [case_price] => 4.200000 [case_quantity] => [statuses] => ));中有4个对象，我附上快照以便更好地理解。请建议我在哪里做错了。

快照：

Answer 1

我认为你缺少的是你将图表渲染到同一个div。尝试这样的事情：

<div *ngFor="let member of chartObject; let i=index"  >
    <div class="col-md-6"
     [chartData]="member.data" [id]="i"
     [chartOptions] = "member.options" 
     chartType="PieChart" 
     GoogleChart>
</div>

[id]="i"应该创建具有不同ID的div。希望这能解决你的问题..

* ngFor在Angular 2中不起作用？

1 个答案: