javascript - 'item' 的路由生成器未包含在参数错误中

Question

错误截图:

plunker(当前不工作): plnkr.co/edit/ft9Z4mq8C1llpAxA0Z1v?p=目录

完整项目链接: https://www.dropbox.com/s/0579y250pq5eti5/Project33.zip?dl=0

wiki.component.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 (item: string) {
    this.items = this.wikipediaService.search(item);
    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: item}]);
  }
}

更多信息和问题背景:

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

Answer 1

免责声明:我的英语可能很糟糕，抱歉:c。

这是因为在您的@RouteConfig中您已经声明您需要这样的项目参数:

{path: '/BiddingPage/:item', name: 'BiddingPage', component: BiddingPageComponent},

并且在您的模板中没有该参数:

<a [routerLink]="['BiddingPage']">Click here to bid on this item.</a>//the "item" is missing

你的模板应该是这样的:

<a [routerLink]="['BiddingPage',{item:item}]">Click here to bid on this item.</a>

享受吧。