错误:用于';项目';未包含在传递的参数中。(Typescript、angular2、javascript、html)

错误:用于';项目';未包含在传递的参数中。(Typescript、angular2、javascript、html),javascript,html,typescript,angular,Javascript,Html,Typescript,Angular,错误截图: 链接到完整项目: 问题背景: 该网站类似于易趣的克隆,但使用了一个从维基百科获取数据的搜索栏 我正在尝试制作一个按钮,该按钮将: 保存变量“item”或“item.name”(我试图通过单击名为“单击此处对此项目进行投标”的按钮来获取用户键入的任何内容的搜索结果的名称) 将用户转移到该特定项目的竞价页面 html中按钮的代码(wiki.component.ts): 指向plunker的链接以及有关此问题的更多详细信息: stackoverflow.com/questions/37

错误截图:

链接到完整项目:

问题背景:

该网站类似于易趣的克隆,但使用了一个从维基百科获取数据的搜索栏

我正在尝试制作一个按钮,该按钮将:

  • 保存变量“item”或“item.name”(我试图通过单击名为“单击此处对此项目进行投标”的按钮来获取用户键入的任何内容的搜索结果的名称)

  • 将用户转移到该特定项目的竞价页面

  • html中按钮的代码(wiki.component.ts):

    指向plunker的链接以及有关此问题的更多详细信息:

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

    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 (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}]);
      }
    }
    
    从'angular2/core'导入{Component};
    从'angular2/http'导入{JSONP_PROVIDERS};
    从“rxjs”导入{Observable};
    从“./wikipedia.service”导入{WikipediaService};
    从“angular2/Router”导入{Router,RouteParams,RouterLink,Router_指令};
    @组成部分({
    选择器:“Wikithing”,
    模板:`
    搜索和显示页面
    每次击键后获取

      {{{item}}

      价格(美元):${{item.Price}}
      可用性:24小时

      当前库存数量:{{Quantity}

      项目的图像:

      点击这里投标这个项目。 点击这里投标这个项目。


    `, 提供者:[JSONP_提供者,维基百科服务], 指令:[路由器\ U指令,路由器链接], }) 导出类WikiComponent{ 构造函数(私有wikipediaService:wikipediaService,私有路由器:路由器){} 项目:可观察; //项目:项目[]=[]; 搜索(术语:字符串){ this.items=this.wikipediaService.search(术语); this.items.map((items)=>items.map(()=>({ 名称:项目, 价格:Math.random(), 数量:Math.random(), 可用性:Math.random() }))); var Prices=Math.random()+Math.random(); var quantity=Math.random(); } gotoItem(项目:任何){ this.router.navigate(['BiddingPage',{item}]); } }
    biddingpage.component.ts的完整代码:

     <button (click)="gotoItem(item)">Click here to bid on this item.</button>
    
     gotoItem (item: any) {
        this.router.navigate(['BiddingPage', {item}]);
      }
    
    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);
    
    
    }
    
    从'angular2/core'导入{Component,OnInit};
    从“angular2/ROUTER”导入{RouteConfig,ROUTER_指令};
    从“/Hero”导入{Hero};
    从“/hero.service”导入{HeroService};
    从'rxjs/Rx'导入{Observable}
    从“./wikipedia.service”导入{WikipediaService};
    从'angular2/http'导入{Jsonp,URLSearchParams};
    从'angular2/core'导入{Input};
    从'angular2/http'导入{JSONP_PROVIDERS};
    从'rxjs/Subject'导入{Subject};
    @组成部分({
    选择器:“BiddingPageComponent”,
    templateUrl:'app/BiddingPage.component.html',
    样式URL:['app/BiddingPage.component.css'],
    提供者:[HeroService,JSONP_提供者,维基百科服务],
    指令:[路由器指令]
    })
    导出类BiddingPageComponent{
    构造函数(私有wikipediaService:wikipediaService){}
    @输入()项:任意;
    myFunction(slotvalue)
    {
    this.slot1=slotvalue;
    此参数为1.numberofbids+=1;
    警报(“您已输入新的出价。”);
    }
    numberofbids=0;
    slot1=0;
    secondsLeft=0;
    左小时=0;
    mightbehours=0;
    滴答声=0;
    项目:任何;
    ngOnInit(滴答声、秒级、左小时、左小时2){
    设定时器=可观测定时器(20001000);
    设HoursOrMinutesTimer=可观测的计时器(20001000);
    设hoursleeftimer=Observable.timer(20001000);
    timer.subscribe(t=>this.ticks=t);
    第二个sleft=100;
    timer.subscribe(t=>this.secondsLeft=-t+86400);
    HoursOrMinutesTimer.subscribe(t=>this.hoursLeft=t/60);
    hoursleeftimer.subscribe(t=>this.mightbehours=t/3600);
    //this.routeParams.get('item');
    }
    //项目:可观察;
    //项目:项目[]=[];
    搜索(术语:字符串){
    this.items=this.wikipediaService.search(术语);
    this.items.map((items)=>items.map(()=>({
    名称:项目,
    价格:Math.random(),
    数量:Math.random(),
    可用性:Math.random()
    })));
    var Prices=Math.random()+Math.random();
    var quantity=Math.random();
    }
    //this.wikipediaService.getHero(项目)
    //.然后(item=>this.hero=item);
    }
    
    biddingpage.component.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
    -->
    
    
    投标页
    
    

    项目名称:{{item.Name}

    原价:{{item.Price}

    库存商品数量:{{item.quantity}

    项目当前状态的说明:

    项目当前状态的说明: 苹果是苹果树上的肉质果实。 它在蔷薇科的苹果属植物中。 苹果是最成熟的果树之一。它生长在果园里。

    所用时间(秒):{{ticks}

    所用时间(分钟):{hoursleet}

    经过的时间(小时):{mightbehours}

    当前最高出价:${slot1}

    剩余时间(小时):{secondsLeft/3600} 剩余时间(分钟):{secondsLeft/60}
    this.router.navigate(['BiddingPage', {item}]);
    
    this.router.navigate(['BiddingPage', {item: item}]);
    
    this.router.navigate(['BiddingPage/' + item]);