Angular 2和Visual Studio更新3中的模板解析错误

Question

我正在关注来自Packt Publishing的ASP.NET Core and Angular 2。在第3章中，作者创建一个ItemListComponent和ItemDetailComponent。当我使用ItemDetailComponent时，我得到模板分析错误。下面是错误

Template parse errors: 
Can't bind to 'item' since it isn't a known property of 'item-detail'. 
1. If 'item-detail' is an Angular component and it has 'item' input, then verify that it is part of this module. 
2. If 'item-detail' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. 
(" 
     </li> 
    </ul> 
    <item-detail *ngIf="selectedItem" [ERROR ->][item]="selectedItem"></item-detail> 

下面

是我写的代码：

ItemDetailComponent：

import {Component, Input} from "@angular/core"; 
import {Item} from "./item"; 
@Component({ 
selector: "item-detail", 
template: ` 
<div *ngIf="item" class="item-details"> 
<h2>{{item.Title}} - Detail View</h2> 
<ul> 
<li> 
<label>Title:</label> 
<input [(ngModel)]="item.Title" placeholder="Insert the 
title..."/> 
</li> 
<li> 
<label>Description:</label> 
<textarea [(ngModel)]="item.Description" 
placeholder="Insert a suitable description..."></textarea> 
</li> 
</ul> 
</div> 
`, 
styles: [` 
.item-details { 
margin: 5px; 
padding: 5px 10px; 
border: 1px solid black; 
background-color: #dddddd; 
width: 300px; 
} 
.item-details * { 
vertical-align: middle; 
} 
.item-details ul li { 
padding: 5px 0; 
} 
`] 
}) 
export class ItemDetailComponent { 
@Input("item") item: Item; 
} 

ItemListComponent：

import { Component, OnInit, Input } from '@angular/core'; 
import { Item } from './item'; 
import { ItemService } from './item.service'; 
@Component({ 
selector: `item-list`, 
template: ` 
    <h2>{{title}}:</h2> 
    <ul class="items"> 
     <li *ngFor="let item of items" [class.selected]="item === selectedItem" (click)="onSelect(item)"> 
      <span>{{item.Title}}</span>    
     </li> 
    </ul> 
    <item-detail *ngIf="selectedItem" [item]="selectedItem"></item-detail> 

`, 
styles: [` 
    ul.items li { 
     cursor: pointer; 
    } 
    ul.items li.selected { 
     background-color: #cccccc; 
    } 
`] 
}) 
export class ItemListComponent implements OnInit 
{ 
@Input() class_name: string; 
title: string; 
selectedItem: Item; 
items: Item[]; 
errorMessage: string; 

constructor(private itemService: ItemService) { 

} 

ngOnInit() { 
    console.log("ItemListComponent instantiated with the following type: " + this.class_name); 
    var s = null; 
    switch (this.class_name) { 
     case "latest": 
     default: 
      this.title = "Latest Items"; 
      s = this.itemService.getLatest(); 
      break; 
     case "most-viewed": 
      this.title = "Most Viewed Items"; 
      s = this.itemService.getMostViewed(); 
      break; 
     case "random": 
      this.title = "Random Items"; 
      s = this.itemService.getRandom(); 
      break; 
    } 
    s.subscribe(
     items => this.items = items, 
     error => this.errorMessage = <any>error 
    ); 
    //this.getLatest(); 
} 

getLatest() { 
    this.itemService.getLatest() 
     .subscribe(
     latestItems => this.items = latestItems, 
     error => this.errorMessage = <any>error 
     ); 
} 

onSelect(item: Item) { 
    this.selectedItem = item; 
    console.log("item with Id " + this.selectedItem.Id + " has been selected."); 
} 
} 

我创建了一个名为DemoInput另一个简单的组件：

import { Component, Input } from '@angular/core'; 
@Component({ 
selector: "demo-input", 
template: `<h1>{{title_name}}</h1>` 
}) 
export class DemoInput 
{ 
@Input("in_name") title_name: string; 
} 

这里还有一个同样的错误，说in_name不是演示输入的已知属性。

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
selector: 'opengamelist', 
template: `<h1>{{title}}</h1> 
      <item-list class_name="latest" class="latest"></item-list> 
      <!--<item-list class_name="most-viewed" class="most-viewed">   </item-list>--> 
      <!--<item-list class_name="random" class="random"></item-list>--> 
      <!--<demo-input [in_name]="title"></demo-input>-->`, 
styles: [` 
     item-list { 
      min-width: 332px; 
      border: 1px solid #aaaaaa; 
      display: inline-block; 
      margin: 0 10px; 
      padding: 10px; 
     } 
     item-list.latest { 
      background-color: #f9f9f9; 
     } 
     item-list.most-viewed { 
      background-color: #f0f0f0; 
     } 
     item-list.random { 
      background-color: #e9e9e9; 
     } 
    `] 
}) 
export class AppComponent { 
title:string = "Open Game List" 
} 

app.module.ts

///<reference path="../../typings/index.d.ts"/> 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 
import { FormsModule } from "@angular/forms"; 
import { RouterModule } from "@angular/router"; 
import "rxjs/Rx"; 

import { AppComponent } from './app.component'; 
import { ItemListComponent } from './item-list.component'; 
import { ItemService } from './item.service'; 
import { ItemDetailComponent } from './item-detail.component'; 
import { DemoInput } from './DemoInput'; 

@NgModule({ 
declarations: [AppComponent, ItemListComponent, ItemDetailComponent,  DemoInput], 
imports: [BrowserModule, HttpModule, FormsModule, RouterModule], 
providers: [ItemService], 
bootstrap: [AppComponent] 
}) 
export class AppModule 
{ 

} 

我使用Visual Studio 2015年更新3虚拟机运行在Mac上。我试图通过安装Angular 2在Mac上创建相同的DemoInput组件。它在我的Mac中正常工作。

这是Visual Studio 2015的问题。我在做什么错误。如果我从ItemListComponent模板中删除item-detail标签，一切正常。

任何人都可以给我一个解决方案。

感谢提前:)

Answer 1

您使用的是完全相同的Angular2版/书中共建指定？如果没有，请告诉我你使用的是什么：我没有得到RC5的这个错误。

我也建议尝试得到来自官方的GitHub库书源代码：

https://github.com/PacktPublishing/ASPdotNET-Core-and-Angular-2

每个章节/书节都有自己的解决方案文件：你是第3章 - 第1部分 。

补充说明：考虑到ItemDetailComponent实现更换后的第3章（第3章 - 第2部分）：如果你不找出一个合适的修复你的问题，你很可能只是跳过该样本实现并直接去更新ItemDetailComponent。