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不是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部分。

作为旁注：考虑到第3章（第3章 - 第2部分）稍后将替换ItemDetailComponent实现：如果您没有找到合适的解决方案您的问题可能只是跳过该示例实现并直接进入更新的ItemDetailComponent。

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

1 个答案: