Ошибка: генератор маршрутов для ‘item’ не был включен в переданные параметры. (Typescript, angular2, javascript, html)

Скриншот ошибки:
http://imgur.com/eHiNEYi

Ссылка на полный проект:

https://www.dropbox.com/s/84svnggv8xeub5m/FullProjectEbayClone.zip?dl=0

Контекст проблемы:

Веб-сайт похож на клон ebay, но использует строку поиска, которая берет данные из Википедии.

Я пытаюсь сделать кнопку, которая будет:

  1. Сохраните переменную «item» или » item.имя «(я пытаюсь получить имя результата поиска того, что пользователь набрал, нажав на кнопку «нажмите здесь, чтобы сделать ставку на этот пункт».)

  2. Перенесите пользователя на страницу торгов для этого конкретного элемента.

Код кнопки в html (wiki.деталь.ts):

 <button (click)="gotoItem(item)">Click here to bid on this item.</button>

Код функции «gotoItem (item)» (wiki.деталь.ts):

 gotoItem (item: any) {
    this.router.navigate(['BiddingPage', {item}]);
  }

Ссылки на plunker и более подробную информацию об этой проблеме:

stackoverflow.com/questions/37422205/displaying-data-that-is-consistent-with-search-results-on-a-different-webpage-t

Полный код wiki.деталь.ts

import { Component }        from 'angular2/core';
import { JSONP_PROVIDERS }  from 'angular2/http';
import { Observable }       from 'rxjs';
import { WikipediaService } from './wikipedia.service';
import {Router, RouteParams, RouterLink, ROUTER_DIRECTIVES} from 'angular2/router';

@Component({
  selector: 'Wikithing',
  template: `
    <h1>Search and Display Page</h1>
    <p><i>Fetches after each keystroke</i></p>
    <input #term (keyup)="search(term.value)"/>
    <ul>
     <li *ngFor="#item of items | async">{{item}} <br> <p> 

     </p> Price (in USD): $ {{item.price}} <br> <p>

      </p> Availability: 24 hours <br> <p> 

      </p> Quantity currently in stock: {{quantity}}

       <br> <p> 

      </p> Image of item: <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="Apple" style="width:100px;height:100px;">
       <br> <p> 
       </p>
               <p>

            </p>

             <a [routerLink]="['BiddingPage']">Click here to bid on this item.</a>
           <button (click)="gotoItem(item)">Click here to bid on this item.</button>
            <p>

                </p>
        <br> <p> 
       </li>
    </ul>
  `,
  providers:[JSONP_PROVIDERS, WikipediaService],
  directives: [ROUTER_DIRECTIVES, RouterLink],

})
export class WikiComponent {
  constructor (private wikipediaService: WikipediaService, private router:Router) {}
  items: Observable<string[]>;
  //  item: Item[] = [];



  search (term: string) {
    this.items = this.wikipediaService.search(term);
    this.items.map((items) => items.map(() => ({
      name: items,
      prices: Math.random(),
      quantity: Math.random(),
      availability: Math.random()
    })));

    var Prices = Math.random() + Math.random();
    var quantity = Math.random();
  }
  gotoItem (item: any) {
    this.router.navigate(['BiddingPage', {item}]);
  }
}

Полный код biddingpage.деталь.ts:

import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';
import {Observable} from'rxjs/Rx'
import { WikipediaService } from './wikipedia.service';
import { Jsonp, URLSearchParams } from 'angular2/http';
import { Input } from 'angular2/core';
import { JSONP_PROVIDERS }  from 'angular2/http';
import { Subject }          from 'rxjs/Subject';
@Component({
  selector: 'BiddingPageComponent',
  templateUrl: 'app/BiddingPage.component.html',
  styleUrls: ['app/BiddingPage.component.css'],
  providers: [HeroService, JSONP_PROVIDERS, WikipediaService],
  directives: [ROUTER_DIRECTIVES]

})



export class BiddingPageComponent{
    constructor (private wikipediaService: WikipediaService) {}
      @Input() item : any;
myFunction(slotvalue) 
 {
        this.slot1 = slotvalue;
        this.numberofbids +=1;
         alert("You have entered a new bid.");
 }
  numberofbids = 0;
    slot1 = 0;
  secondsLeft = 0;
  hoursLeft = 0;
  mightbehours = 0;
  ticks = 0;

  items : any;
  ngOnInit(ticks, secondsLeft, hoursLeft, hoursLeft2){
    let timer = Observable.timer(2000,1000);
    let HoursOrMinutesTimer = Observable.timer(2000, 1000);
    let HoursLeftTimer = Observable.timer(2000, 1000);
    timer.subscribe(t=>this.ticks = t);
    secondsLeft = 100;
    timer.subscribe(t=>this.secondsLeft = -t + 86400);
    HoursOrMinutesTimer.subscribe(t=>this.hoursLeft = t/60);
    HoursLeftTimer.subscribe(t=>this.mightbehours = t/3600);
     //this.routeParams.get('item');



  }

  //items: Observable<string[]>;
  //  item: Item[] = [];



  search (term: string) {
     this.items = this.wikipediaService.search(term);
    this.items.map((items) => items.map(() => ({
      name: items,
      prices: Math.random(),
      quantity: Math.random(),
      availability: Math.random()
    })));

    var Prices = Math.random() + Math.random();
    var quantity = Math.random();




}


    //this.wikipediaService.getHero(item)
   //   .then(item => this.hero = item);


}

Полный код biddingpage.деталь.формат html

<html>
    <center>
<h3>Bidding Page</h3>
<a name="top"></a>
</center>
<p>



 </p>




        <p>



          </p>


  <form>
        <img src="http://weknowyourdreamz.com/images/apple/apple-05.jpg" alt="Apple" style="width:100px;height:100px;">
        <p>
            </p>
        <label for="name">Name of item: {{item.name}} </label>
        <p>



          </p>
        <label for="name">Original Price: {{item.price}} </label>
         <p>



          </p>
           <p>



          </p>
        <label for="name">Number of items in stock: {{item.quantity}} </label>



         <p>
          </p>
        Description of item’s current condition:
         <p>



          </p>
                <label for="name">Description of item’s current condition: </label>
                <label for="name">The apple is a fleshy fruit from the apple tree. 
                    It is in the species Malus domestica in the rose family Rosaceae. 
                    The apple is one of the most grown tree fruits. It is grown in orchards.</label>
        <p>



            </p>
        <label for="name">Time elapsed (in seconds): {{ticks}} </label>


          <p>



          </p>


          <p>
          <label for="name">Time elapsed (in minutes): {{hoursLeft}} </label>


          </p>
          <p>

            </p>
          <p>
          <label for="name">Time elapsed (in hours): {{mightbehours}} </label>


          </p>
        <label for="name">Current highest bid: $ {{slot1}} </label>

        <p>




          </p>

 <p>
             <label for="name">Time left (in hours): {{secondsLeft/3600}} </label>
             <p>

          <p>
             <p>
             <label for="name">Time left (in minutes): {{secondsLeft/60}} </label>
             <p>

          <p>
             <label for="name">Time left (in seconds): {{secondsLeft}} </label>
             <p>

             NOTE: There are 86400 seconds in one day.



          </p>
           <label for="name">Number of bids so far: {{numberofbids}} </label>



          <p>



          </p>


  Bid slot 1: <p>$ {{slot1}} </p>
          <p>



          </p>


<label for="name">Enter your bid: </label>
<input type="number" #bid class="form-control" required>

<button (click)='myFunction(bid.value)'>Click here to bid.</button>



          <p>







          </p>









<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

1 ответ

  1. {item} в

    this.router.navigate(['BiddingPage', {item}]);
    

    недопустимый. Можно передать массив, содержащий строки или объекты. {item}ни то, ни другое.

    Возможно, вы захотите пройти

    this.router.navigate(['BiddingPage', {item: item}]);
    

    или в новом RC.1 маршрутизатор

    this.router.navigate(['BiddingPage/' + item]);