Angular 通过路由的网格动态填充-角度2

我的网页编译得很好，但在Sprint下拉菜单中，我设置了路由。。

这是我的密码

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';

// Modules
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatButtonModule, MatCardModule, MatToolbarModule, MatDatepickerModule, MatIconModule, MatMenuModule, MatListModule, MatProgressBarModule, MatSidenavModule, MatSliderModule, MatTableModule, MatTabsModule, MatExpansionModule, MatFormFieldModule, MatFormFieldControl} from '@angular/material';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {MomentModule} from 'angular2-moment/moment.module';
//import { SparklineModule } from '@progress/kendo-angular-charts';
import 'hammerjs';

/// Components
import { AppComponent } from './app.component';
import { SprintService } from './Sprint/Sprint.service';
import { HeaderComponent } from './header/header.component';
import { TableComponent } from './table/table.component';
import { DateComponent } from './date/date.component';
import { GaugeComponent} from './gauge/gauge.component';

///Kendo
import {ButtonsModule} from '@progress/kendo-angular-buttons';
import { GridModule } from '@progress/kendo-angular-grid';
import {GaugesModule} from '@progress/kendo-angular-gauges';

///Routing
import { RouterModule, Routes } from '@angular/router';
import { NgForOf } from '@angular/common';
import { ISprint } from './Sprint/Sprint';

var sprint = new Array<ISprint>();

const appRoutes: Routes = [
  { path: 'Summary', component: HeaderComponent },
  { path: '', redirectTo: 'Summary', pathMatch: 'full'}
];

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    TableComponent,
    DateComponent,
    GaugeComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true} // <-- debugging purposes only
    ),
//other imports here
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    HttpModule,

  ],
  providers: [SprintService],
  bootstrap: [AppComponent]
})
export class AppModule { }

从'@angular/platform browser'导入{BrowserModule}；
从'@angular/common/http'导入{HttpClientModule}；
从“@angular/core”导入{NgModule}；
//模块
从“@angular/platform browser/animations”导入{BrowserAnimationsModule}；
从“@angular/material”导入{MatButtonModule、MatCardModule、MatToolbarModule、MatDatepickerModule、MatConModule、MatMenuModule、MatListModule、MatProgressBarModule、MatSidenavModule、MatSliderModule、MatTableModule、MatAbsModule、MatExpansionModule、MatFormFieldModule、MatFormFieldControl}；
从'@progress/kendo angular charts'导入{ChartsModule}；
从'@angular/forms'导入{FormsModule}；
从'@angular/http'导入{HttpModule}；
从'angular2 moment/moment.module'导入{MomentModule}；
//从'@progress/kendo angular charts'导入{SparklineModule}；
输入"hammerjs";；
///组成部分
从“./app.component”导入{AppComponent}；
从“./Sprint/Sprint.service”导入{SprintService}；
从“./header/header.component”导入{HeaderComponent}；
从“./table/table.component”导入{TableComponent}；
从“./date/date.component”导入{DateComponent}；
从“./gauge/gauge.component”导入{GaugeComponent}；
///剑道
从“@progress/kendo angular buttons”导入{ButtonsModule}；
从“@progress/kendo angular grid”导入{GridModule}；
从“@progress/kendo angular gauges”导入{GaugesModule}；
///路由
从'@angular/router'导入{RouterModule，Routes}；
从“@angular/common”导入{NgForOf}；
从“./Sprint/Sprint”导入{ISprint}；
var sprint=新数组（）；
施工许可：路线=[
{路径：“摘要”，组件：HeaderComponent}，
{路径：''，重定向到：'Summary'，路径匹配：'full'}
];
@NGD模块({
声明：[
应用组件，
头部组件，
表组件，
日期组件，
计量元件
],
进口：[
RouterModule.forRoot(
批准，
{enableTracing:true}/{this.summary=summary}，
error=>this.error=error）；
这是。_sprintService.getSprintWeb（）
.subscribe（sprint=>{this.sprint=sprint；
console.log（this.sprint）}，
error=>this.error=error）；
}
公共标签内容（e:any）：字符串{
返回e.category；
}
}

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 *ngFor = "let item of sprint;" routerLink = "/summary" routerLinkActive = "active">
          <button 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;" >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>


列表
{{item.Name}
短跑分析
你跑的方向
{{newdate}}

如果您能提供帮助并花点时间查看问题所在，我将不胜感激。我对Angular.io网站上的路由演练进行了建模。谢谢！
您已将路由定义为

 { path: 'Summary', component: HeaderComponent }

你指的是

 routerLink = "/summary"

路由器路径区分大小写，路径和routerLink应该匹配，因此更新路径或routerLink以匹配，最好使用路径作为小写

{ path: 'summary', component: HeaderComponent }

希望这将解决您的路由错误。
您已将路由定义为

 { path: 'Summary', component: HeaderComponent }

你指的是

 routerLink = "/summary"

路由器路径区分大小写，路径和routerLink应该匹配，因此更新路径或routerLink以匹配，最好使用路径作为小写

{ path: 'summary', component: HeaderComponent }

希望这将解决您的路由错误。
Make

routerLink = '/summary' 

到

此外，请记住，您在此处使用/是出于特定原因。这取决于您在应用程序树层次结构中的当前位置。/means localhost:4200/summary
其中./summary意味着在层次结构中向上一步并在那里追加摘要。
Make

routerLink = '/summary' 

到

此外，请记住，您在此处使用/是出于特定原因。这取决于您在应用程序树层次结构中的当前位置。/means localhost:4200/summary
其中./summary意味着在层次结构中向上一步并在那里添加摘要。
在RouterLink中也避免“/”谢谢！非常有帮助，这就是问题所在！在RouterLink中也避免“/”谢谢！非常有帮助，这就是问题所在！谢谢！非常有帮助，这就是问题所在！我从我的源代码更新了最后一个问题，因为我看了几个小时没看懂的新问题我更新了我原来的问题，因为我看了几个小时没看懂的新问题