Angular 2和Visual Studio update 3中的模板分析错误

Question

我正在从Packt Publishing关注ASP.NET Core和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不是demo-input的已知属性。

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 
{

}

我在Mac上运行的虚拟机上使用Visual Studio 2015 Update 3。 我尝试通过安装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 。