* ngFor가 각도 2에서 작동하지 않습니까?

Question

나는 프로젝트에서 작업 중이며 GoogleChart을 사용 중입니다. 그러나이 GoogleChart 지시문을 * ngFor와 함께 구현할 때 GoogleChart 인스턴스가 4 개 필요하지만 하나의 인스턴스 만 생성됩니다. 왜 차트가 하나만 생성되는지 모르겠습니다. GoogleChart에는 4 개의 요소가 있으므로 4 개의 차트가 있어야합니다.

내 코드는 다음과 같습니다

프로파일 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> 

프로파일 component.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" 작성해야 DIV 년대 다른 ID로 ..이 방법으로 문제가 해결 희망 ..