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
无法正常工作。