Question

我遇到了这个问题，最终我由webcomponent订阅了api，因此它将根据我在网页上具有冲刺列表的菜单上单击的信息更新组件内部的数据，每个都有在此进度条形图上显示的唯一数据，

我遇到的问题是旧数据将保留在图形上，但会添加和显示新数据，但没有名称。在浏览整个网页时，它变得非常混乱。

你们中的任何人都知道我在做什么吗？

Progress-bar.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { SummaryService } from '../summary.service';
import { ISummary, IMemberDetails } from '../summary';
import {ISprint} from '../Sprint/Sprint';
import { SprintService } from '../Sprint/Sprint.service';


@Component({
  selector: 'app-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.css']
})
export class ProgressBarComponent implements OnInit {

  nameArray: String[];
  numberArray: number[];

  error: string;
  summary: ISummary;
  sprint: ISprint[];
  _sprintId:string;

  @Input() set sprintId(sprintId:string){
    this._sprintId = sprintId;
     this._sprintService.getSprintWeb(this._sprintId)
     .subscribe(summary => {
      this.summary = summary;
      this.nameArray = this.summary.MemberDetails.map(x => x.Name);
      this.summary.MemberDetails.forEach(element => {
      this.numberArray.push(element.HoursCommitted - element.HoursToDo);
     }); 
   },
     error => this.error = <any>error);
  }


  constructor(private _summaryService: SummaryService, private _sprintService: SprintService ) {
    this.summary = new ISummary(); 
    this.sprint = new Array<ISprint>();
    this.numberArray = new Array<number>();
    this.nameArray = new Array<string>();
  }

    ngOnInit() {
    }
}

progress-bar.component.html

 <mat-card style="float: right; width: 650px; height: 580px; margin: 15px;">
   <mat-card-title style="font-family: 'Quicksand', sans-serif; font-size: 30px; font-weight: bolder;"> Individual Progress </mat-card-title>
   <mat-card-subtitle style="font-family: 'Quicksand', sans-serif; font-size: 20px; font-weight: bolder;"> Hours Completed by Individual</mat-card-subtitle>
  <kendo-chart style="width: 650px; height: 500px;">
    <!-- <kendo-chart-title text="Sprint hours"></kendo-chart-title> -->
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item style="font-family: 'Ubuntu', sans-serif;" [categories]="nameArray">
                <!-- <p>((member.HoursCommitted - member.HoursToDo)/member.HoursCommitted)*100 | number: '1.0-0'</p> -->
              </kendo-chart-category-axis-item>
            </kendo-chart-category-axis>

            <!-- <kendo-chart-value-axis>
                <kendo-chart-value-axis-item  
                    [majorGridLines]="hidden" [minorTicks]="hidden"
                    [min]="0" [max]="member.HoursCommitted" [plotBands]="[{from: 0, to: member.HoursCommitted * .95, color: '#ccc', opacity: .6}]">
                </kendo-chart-value-axis-item>
            </kendo-chart-value-axis> -->

            <kendo-chart-series>
              <kendo-chart-series-item  type="bar" [gap]="10" [spacing]="10" [data]="numberArray">
              </kendo-chart-series-item>
          </kendo-chart-series>
          <kendo-chart-tooltip>
              <ng-template kendoChartSeriesTooltipTemplate let-value="value">
                Maximum: {{ value.target }} 
                Average: {{ value.current }}
              </ng-template>
          </kendo-chart-tooltip>
        </kendo-chart>
  </mat-card>

角度订阅输出错误

0 个答案: