Question

我的网页编译正常，但是在Sprint下拉菜单中，我已设置了路由。

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

      </a>
    </mat-menu>

我正在尝试从网站提取数据，以根据选择的冲刺更改网格中的数据。现在我不知道语法是必需的，因为我还在学习。有人可以帮忙吗？

webpage

这是我的代码

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

Header.component.ts

import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';
import {DateComponent} from '../date/date.component';

import { SprintService } from '../Sprint/Sprint.service';
import {SummaryService} from '../summary.service';

import { ISummary } from '../summary';
import {ISprint} from '../Sprint/Sprint';
import 'rxjs/add/operator/map';
import {Http, Response} from '@angular/http';

@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;
  sprint: ISprint[];
  newdate: string;

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

  ngOnInit() {
    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;

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

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

  }

  public labelContent(e: any): string {
    return 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>

我将不胜感激，您将花费所有的时间和精力来查找问题所在。我根据Angular.io的网站演练对当前的大部分路由进行了建模，以进行路由。谢谢！

Answer 1

您已将路线定义为

 { path: 'Summary', component: HeaderComponent }

，您将其称为

 routerLink = "/summary"

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

{ path: 'summary', component: HeaderComponent }

希望这可以解决您的路由错误。

Answer 2

制作

routerLink = '/summary'

到

routerLink = '/Summary'

此外，请记住，由于某种特殊原因，您正在使用/。这取决于您在应用程序树层次结构中的当前位置。 /表示localhost：4200 / summary ./summary表示在层次结构中上移1步并在其中附加摘要。

通过路由进行网格动态填充-Angular 2

2 个答案: