Question

我正在尝试从.ts文件中将值传递到.html文件中，但是我无法访问ImemberDetails类的成员，因为它说我要访问的成员不存在，即使它们显然可以？..

Guage.component.ts

import { Component, OnInit } from '@angular/core';
import { SummaryService } from '../summary.service';
import { ISummary, IMemberDetails } from '../summary';
import { ISprint } from '../Sprint/Sprint';
import { SprintService } from '../Sprint/Sprint.service';
import { forEach } from '@angular/router/src/utils/collection';


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

  public showLabels = false;
  public showTicks = true;
  public reverse = false;

  public startAngle = -50;
  public endAngle = 230;
  public rangeSize: number;

  public rangeLineCap = 'round';

  public rangePlaceholderColor = '#e6e5e5';
  public ticksColor = '#80bfff';
  //  public labelsColor = '#0000ff';

  error: string;
  summary: ISummary;
  sprint: ISprint[];
  totalHour: number;
  numberArray: number[];
  totalHoursCommitted: number;
  totalHoursCompleted: number;
  sprintHours: number;

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

    this.sprintHours = 3;
  }

  getPoints() {
    this.totalHoursCommitted += this.summary.MemberDetails.HoursCommitted.forEach();
    this.totalHoursCompleted += this.summary.MemberDetails.HoursToDo.forEach();
    console.log(this.totalHoursCommitted);
    console.log(this.totalHoursCompleted);

    this.sprintHours = (this.totalHoursCompleted / this.totalHoursCommitted) * 100;
  }

  ngOnInit() {
    this._summaryService.getSummaryWeb()
      .subscribe(summary => {
      this.summary = summary;
        console.log(this.summary)
      },
        error => this.error = <any>error);
  }


}

gauge.component.html

<mat-card style="width: 660px; height: 180px;">   
        <mat-card-title  style="font-family: 'Quicksand', sans-serif; font-size: 20px; font-weight: bolder">Sprint Complete</mat-card-title>  
    <div class="col-sm-12 col-md-5" style="font-family: 'Quicksand', sans-serif; font-size: 50px; font-weight: bolder">

        <kendo-arcgauge #arc [value]="totalHour">
            <ng-template kendoArcGaugeCenterTemplate let-value="value">
                {{ value }} %
            </ng-template>               
        </kendo-arcgauge>  

        <kendo-arcgauge #arc [value]="totalHour" style="font-family: 'Quicksand', sans-serif; font-size: 50px; font-weight: bolder; float: right;">
            <ng-template kendoArcGaugeCenterTemplate let-value="value">
                {{ value }} %
            </ng-template>
        </kendo-arcgauge>

        <mat-card  style="font-family: 'Quicksand', sans-serif; font-size: 40px; font-weight: bolder; width: 120px; height: 120px;" >
           {{sprintHours}}
        </mat-card>

    </div>
</mat-card>

summary.ts（摘要/ ISummary类型/ IMemberDetails类型）

export class ISummary {
  SprintName: string;
  HoursCommitted: number;
  HoursToDo: number;
  PointsCommitted: number;
  PointsCompletd: number;
  WorkHoursRemaining: number;
  MemberDetails: IMemberDetails[];
}

export class IMemberDetails {
  Name: string;
  HoursCommitted: number;
  HoursToDo: number;
  PointsCommitted: number;
  PointsCompleted: number;
  ItemsWithoutPoints: number;
  ItemCount: number;  
}

任何建议都会有所帮助！似乎并没有那么大的错误，只是似乎无法访问我的HoursCommitted和HoursToDo。

Angular 2-无法访问类中的成员

0 个答案: