Angular2サブモジュールのインポートに関する問題

Question

NgSemanticModuleを使用してサブモジュールに問題があります。モジュール自体は、サブモジュールコンポーネントテンプレート内のNgSemanticタグなしで動作します。サブモジュール内でNgSemantigコンポーネントを使用しようとしても失敗します。 AppComponentテンプレートでHeaderComponentテンプレートを使用すると、同じコードが機能します。ヘッダーモジュールレベルでNgSemanticモジュールをインポートする方法は？

ヘッダーモジュール：

import { NgModule } from '@angular/core'; 
import { HeaderComponent } from "./header.component"; 
import { NgSemanticModule } from "ng-semantic"; 


@NgModule({ 
    declarations: [ 
    HeaderComponent 
], 
imports: [ 
NgSemanticModule 
], 
providers: [], 
exports:[ 
    HeaderComponent 
] 
}) 

export class HeaderModule { } 

ヘッダーコンポーネント：

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.css'] 
}) 
export class HeaderComponent{} 

ヘッダーテンプレート：

<sm-menu title="Angular2" class="inverted teal" logo="/assets/images/semantic.png"> 
<a sm-item *ngFor="let item of items" [icon]="item.icon">{{item?.title}}</a> 

<sm-menu class="menu right secondary"> 
<a sm-item href="#/elements/menu" 
    image="http://semantic-ui.com/images/avatar/small/stevie.jpg">Elliot Fu</a> 
<a sm-item icon="sidebar big"></a> 

私のアプリモジュール：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { NgSemanticModule } from "ng-semantic"; 
import { HeaderModule } from "./header/"; 

@NgModule({ 
declarations: [ 
    AppComponent 
], 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    NgSemanticModule, 
    HeaderModule 
    ], 
    providers: [], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule {} 

アプリケーションコンポーネント：

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

@Component({ 
selector: 'app-root', 
template: '<app-header></app-header>', 
styleUrls: ['./app.component.css'] 
}) 
export class AppComponent {} 

例外：

unhandled Promise rejection: Template parse errors: 
Can't bind to 'ngForOf' since it isn't a known property of 'a'. ("<sm-menu  title="Angular2" class="inverted teal" logo="/assets/images/semantic.png"> 
<a sm-item [ERROR ->]*ngFor="let item of items" [icon]="item.icon"> {{item?.title}}</a> 

Answer 1

あなたのHeaderModule内CommonModuleをインポートする必要があります。このモジュールには、angular2（*ngForなど）の一般的な指令が含まれています。

import { NgModule } from "@angular/core"; 
import { CommonModule } from "@angular/common"; 
import { HeaderComponent } from "./header.component"; 
import { NgSemanticModule } from "ng-semantic"; 


@NgModule({ 
    declarations: [ 
     HeaderComponent 
    ], 
    imports: [ 
     NgSemanticModule, 
     CommonModule 
    ], 
    providers: [ 

    ], 
    exports:[ 
     HeaderComponent 
    ] 
}) 

export class HeaderModule {}