Question

我是Angular的新手，在遵循Pluralsight的Angular 2教程时遇到困难。

我在这里遇到了几个问题：

运行 npm start 它说 ' app / products / product-list.component.ts（6,3）：错误TS1146：预期宣言。'
控制台显示以下 意外值 'ProductListComponent'由模块'AppModule'

以下是代码文件。任何帮助，将不胜感激。

app.component.ts

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

@Component({
    selector: 'pm-app',
    template: `
        <div>
            <h1>{{pageTitle}}</h1>
            <pm-products></pm-products>
        </div>
    `
})
export class AppComponent { 
    pageTitle: string = "Acme Product Management";
}

产品list.component.ts

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

@Component({
    selector: 'pm-products',
    templateUrl: 'app/products/product-list.component.html'
});

export class ProductListComponent {

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent }  from './app.component';
import { ProductListComponent } from './products/product-list.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ 
    AppComponent, 
    ProductListComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

产品list.component.html

<div class='panel panel-primary'>
    <div class='panel-heading'>
        Product List
    </div>

    <div class='panel-body'>
        <div class='row'>
            <div class='col-md-2'>Filter by:</div>
            <div class='col-md-4'>
                <input type="text" />
            </div>
        </div>
        <div class='row' >
            <div class='col-md-6'>
                <h3>Filtered by:</h3>
            </div>
        </div>

        <div class='table-responsive'>
            <table class='table'
                <thead>
                    <tr>
                        <th>
                            <button class='btn btn-primary'>
                                Show Image
                            </button>
                        </th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Available</th>
                        <th>Price</th>
                        <th>5 Star Rating</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>
        </div>
    </div>
</div>

Screenshot of the console

谢谢！

Answer 1

您的;装饰者的末尾有一个@Component，请将其删除： - ）

模块'AppModule'声明的意外值'ProductListComponent'

1 个答案: