Angular2:意外的令牌错误&将输入显示到变量中

时间:2016-05-06 03:16:38

标签: javascript html angular

本网站的基本理念是ebay克隆。 对于这个问题,我正在尝试建立出价网页。

错误的屏幕截图:enter image description here

链接到没有nodes_modules文件夹的完整项目:enter link description here

我正在尝试制作一个变量,用于显示用户点击按钮后输入的出价。 我不确定是否需要创建一个带有一组出价的构造函数。

.ts文件代码:

import {Component, OnInit} from 'angular2/core';
import {RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {Hero} from './hero';
import {HeroService} from './hero.service';

@Component({
selector: 'BiddingPageComponent',
templateUrl: 'app/BiddingPage.component.html',
styleUrls: ['app/BiddingPage.component.css'],
providers: [HeroService],
directives: [ROUTER_DIRECTIVES]
})
export class BiddingPageComponent
{
       var slot1 = 0;
       myFunction() 
      {
           slot1 = "{{slot1}}";
      }
}

我需要更改.html文件的唯一部分:

投标位置1:

<input type="number" name="fname" value={{slot1}}><br>

完整的.html文件代码:

<html>
<center>
  <h3>Bidding Page</h3>
</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">Apple </label>
  <label for="name">Original Price: $1.00 </label> Description of item’s current condition:
  <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>
  <form>
    <label for="name">Time left on auction:
        <input type="number" class="form-control" required>
          <p></p>
            <form>
        <label for="name">Starting bid:</label>
    <input type="number" class="form-control" required>
    <p></p>
    <label for="name">Number of bids so far: </label>

    <label for="name">{{numberofbids}}</label>

    <p></p>
    Bid slot 1: <input type="number" name="fname" value={{slot1}}><br> Bid slot 2: <input type="number" name="fname" value={{slot2}}><br> Bid slot 3: <input type="number" name="fname" value={{slot3}}><br> Bid slot 4: <input type="number" name="fname"
      value={{slot4}}><br> Bid slot 5: <input type="number" name="fname" value={{slot5}}><br> Bid slot 6: <input type="number" name="fname" value={{slot6}}><br> Bid slot 7: <input type="number" name="fname" value={{slot7}}><br>
  </form>​
</form>
<p></p>
<form>
<form>
    <label for="name">Enter your bid: </label>
    <input type="number" class="form-control" required>
    <button onclick="myFunction()">Click here to bid.</button>
    <p></p>
    <button>Click here to return to the top.</button>

1 个答案:

答案 0 :(得分:2)

因为您正在使用Typescript,只需从var

中删除var slot1 = 0;即可