typescript - *ngFor ไม่ทำงานใน Angular 2?

ฉันกำลังทำงานเกี่ยวกับโปรเจกต์และใช้ GoogleChart แต่เมื่อฉันนำไดเรกทีฟ GoogleChart นี้ไปใช้กับ *ngFor กลับสร้างเพียงอินสแตนซ์เดียว ทั้งที่ควรจะมี 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 ตัวอยู่ข้างใน ฉันได้แนบภาพหน้าจอเพื่อให้เข้าใจได้ดีขึ้น โปรดแนะนำฉันว่าฉันกำลังทำผิดตรงไหน

ภาพสแนปช็อต:

คำตอบ #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>

The [id]="i" ควรสร้าง div ที่มี id แตกต่างกัน.. หวังว่านี่จะแก้ปัญหาของคุณได้..