Angular 2-订阅问题，不显示输出

Question

我目前正在尝试通过为正在构建的Web应用程序配置api来获取数据，并且我有一个按钮驱动菜单，该菜单可从api中提取数据，并应更改显示在api上的所有数据和图表网页，具体取决于您在菜单中单击的数据源。

我遇到的问题是由于订阅丢失以及语法可能不正确，导致数据无法显示在我的输出中。我仍在学习，将不胜感激！

sprint.ts

export class ISprint {
    Id: string;
    Name: string;
    Number: number;
}

Summary.ts

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

Sprint.service.ts

@Injectable()
export class SprintService {
  constructor(private _http: HttpClient) {

  }

  //  --- SPRINT CLASS from Sprint.ts
//   export class ISprint {
//     SprintID: number;
//     SprintName: string;
//     SpringNumber: number;
// }



  getSprintsWeb(): Observable<ISprint[]> {
    var data = this._http.get<ISprint[]>("http://localhost:52692/api/sprint");
    return data;
  }

  public getSprintWeb(TimeBox : string): Observable<ISummary> {
    // debugger;
    console.log("blahhhhhh");
    var url = "http://localhost:52692/api/sprint?TimeBox=" + TimeBox;
    return this._http.get<ISummary>(url);
  }
}

Header.Component.ts

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

  title = 'app';
  private apiURL = 'http://localhost:52692/api/sprint';
  error: string;
  summary: ISummary;
  sprints: ISprint[];
  newdate: string;

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

  ngOnInit() {
    //this.summary = this._summaryService.getSummary();

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


      this._sprintService.getSprintsWeb()
      .subscribe((sprints) => {
        this.sprints = sprints;
        console.log(this.sprints)
      }, error => this.error = <any>error);


        const monthNames = ["January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"];
        var dateObj = new Date();
        var month = dateObj.getUTCMonth() + 1; //months from 1-12
        var day = dateObj.getUTCDate();
        var year = dateObj.getUTCFullYear();
        const d = new Date();
        this.newdate = monthNames[d.getMonth()] + " " + day + "," + " " + year;
      }

      dataUpdate( item: ISprint) {
        console.log(item);

        this._sprintService.getSprintWeb(item.Id)
        .subscribe((summary) => {
          this.summary = summary;
        }, error => this.error = <any>error);

        this.summary.SprintName = item.Name;
        console.log(this.summary);
      }
}

Header.component.Html

<mat-card style="background: #141d26; ">
    <!-- Left Header -->
    <button mat-button [matMenuTriggerFor]="menu">
      <mat-icon style="font-size: 40px; color: white">list</mat-icon> 
    </button> 

    <mat-menu #menu="matMenu" >
      <a style="float: left" *ngFor = "let item of sprint;" routerLink = "/Summary" routerLinkActive = "active">
          <button  (click)="dataUpdate(item)" mat-menu-item style="border-inline-end-color: #141d26; border-width: 1mm"> {{item.Name}}</button>
      </a>
    </mat-menu>

    <!-- <router-outlet></router-outlet> -->

    <!-- Center -->
        <button mat-button style="font-family: 'Megrim', cursive; color: white; height:32px; font-size: 42px; font-weight: bolder;" > CSC  Sprint-alYtics</button>
        <mat-icon style="font-size: 40px; color: white">directions_run</mat-icon> 

    <!-- Right -->
    <h1 style="float: right; font-family: 'Oswald', sans-serif; color: white"> {{newdate}} </h1>
</mat-card>

谢谢！