Angular Typescript component.ts没有在index.html中显示,不确定为什么?

时间:2017-02-18 14:09:46

标签: javascript node.js angular typescript components

shopping - list.component.ts

import { Component } from "angular2/core";
@Component({
    selector: 'shopping-list',
    template: `

    <ul>
        <li *ngFor="#shoppingListItem of shoppingListItems"
        (click)="onItemClicked(shoppingListItem)"
        >{{ shoppingListItem.name }}</li>
    </ul>

    <input type="text" [{ngModel}]="selectedItem.name">
    <button (click)="onDeleteItem()">delete</button><br>
    <input type="text" #shoppingListItem>
    <button (click)="onAddItem(shoppingListItem)">Add</button>    
    `
})

export class ShoppingComponent {
    public shoppingListItems = [{ name: "milk" }, { name: "bread" }, { name: "chorizo" }, ];
    public selectedItem = { name: "" };
    onItemClicked(shoppingListItem) {
        this.selectedItem = shoppingListItem;
    }
    onAddItem(shoppingListItem) {
        this.shoppingListItems.push({ name: shoppingListItem.value });
    }
    onDeleteItem() {
        this.shoppingListItems.splice(this.shoppingListItems.indexOf(this.selectedItem), 1);
    }
}

boot.ts

import { bootstrap } from 'angular2/platform/browser';
import { AppComponent } from './app.component'
import { ShoppingComponent } from "./shopping-list.component";
bootstrap(AppComponent);
bootstrap(ShoppingComponent);

当我在Windows命令行中npm start运行时,我的Shopping Component不会显示在index.html中。不知道为什么。此刻,我拉着我的头发试图理解为什么它不会跑。我的Appcomponent工作正常,只是ShoppingComponent无法正常工作。

0 个答案:

没有答案