angular - *ngFor 在 Angular 2 中不起作用？

Question

我正在开发一个项目并使用 GoogleChart。但是，当我使用 *ngFor 实现这个 GoogleChart 指令时，尽管应该有 4 个该 GoogleChart 实例，但只有一个实例被创建。我不知道为什么只创建一个图表，应该有 4 个图表，因为 GoogleChart 中有 4 个元素。

我的代码是:

profile-component.html:

<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>

配置文件组件.ts:

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");
      }
    )
  }
}

在我的 chartObject 中有 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。 希望这能解决您的问题..