0

早上好，我通过 routerLink 发送数据时遇到问题；在目标组件中，它们始终未定义。

其实模板是：

        <div class="container-fluid">
    <form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>
      <div class="lig">
        <md-form-field>
            <input mdInput type="number" [(ngModel)]="candidate.orderNumber" name="on" (focusout)="checkForm();"  placeholder="Order Number" required>
        </md-form-field>
      </div>
      <div class="lig">
          <md-form-field>
              <input mdInput [(ngModel)]="candidate.dateOfBirth" [mdDatepicker]="myDatepicker" (focusout)="checkForm();" name="myDate1" placeholder="Birth Date" required>
              <md-datepicker-toggle mdSuffix [for]="myDatepicker" ></md-datepicker-toggle>
              <md-datepicker #myDatepicker></md-datepicker>
          </md-form-field> 
      </div>
      <div class="lig">
        <input type="submit"  name="enter" value="Enter" >
        <button type="button" *ngIf="valid2==1" 
[routerLink]="['/reportregistration', candidate.name, candidate.surname, candidate.gender ]" 
                      >PRINT FORM!</button>

      </div>     
    </form>     
    </div>

从给定候选人的 orderNumber 和 dateOfBirth 我检查它是否退出然后我显示有关候选人的更多详细信息。问题是，即使找到候选人（我通过 console.log(candidate) 看到它），组件 reportregistration 中的参数 Candidate.name 、candidate.surname、candidate.gender都是[routerLink]="['/reportregistration', candidate.name, candidate.surname, candidate.gender ]" 未定义的。

相关的 Typescript 文件是：

import { Component, OnInit } from '@angular/core';
import { NgForm } from "@angular/forms";
import { Response } from "@angular/http";
import { Candidate } from "../candidate.interface";
import { UserService } from "../user.service";

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

candidate: Candidate;
orderNumber: number;
dateOfBirth:Date;
valid=0;
valid2=0; name;
  constructor(private userService: UserService) {
  }

  ngOnInit() {
    this.candidate = {name:"",surname:""};
  }

onSubmit(form: NgForm){ 
  this.userService.getCandidate(this.candidate)
    .subscribe( 
      (response: Candidate) => {this.candidate = response,
                                console.log(this.candidate)
                               }
    );
}
}

在服务提供商中，我有：

import { Injectable } from "@angular/core";
import { Http, Response, Headers } from "@angular/http";
import 'rxjs/Rx';
import { Observable } from "rxjs";


@Injectable()
export class UserService{
  constructor(private http: Http){}

 getCandidate(candidate): Observable<any> {
    const body = JSON.stringify(candidate);console.log(JSON.stringify(candidate));
    const headers = new Headers({'Content-Type': 'application/json'});
    return this.http.post('http://127.0.0.1:8000/api/candidate', body, {headers: headers})
      .map(
        (response: Response) => {
          return response.json().candidate
        }
      );
  }

我需要一些帮助...

好的。该路线位于 app.module.ts 中，并且是：

export const routerConfig =[

  {
    path:'',
    component: WelcomeComponent
  },
  {
    path:'connexion',
    component: ConnexionComponent
  },
   {
    path:'connexion/:idcandidates/:name/:surname',
    component: ConnexionComponent
  },
  {
    path:'registration',

      component:RegistrationComponent
  },
  {
    path:'reportregistration/:name/:surname/:gender/',
    component:ReportRegistrationComponent
  },

  {
    path:'viewRegistrations',
    component:AllRegistrationComponent
  },
  {
    path:'configs',
    component:GeneralConfigsComponent
  },

  {
    path:'downloadRegistration',
    component:DownloadRegistrationComponent
  },
    {
        path: "**",
        component: WelcomeComponent
    }

];
4

0 回答 0