无法绑定到"ngIf"，因为它不是'md-card-title'的已知属性

Question

我正在用Angular2材料库学习Angular2 RC5，并使用VisualStudio 2015.在AspNetCore 1.0应用程序中运行，我采用了一个完美运行的Angular2 RC5单页应用程序，并试图引入延迟加载，只有登录页面才会首先加载。当我成功登录后，我想加载剩下的页面。

当我在SPA模式下点击登录按钮时，我将成功地重定向到DashboardComponent页面，该页面预先加载了登录页面——这是在我引入延迟加载之前。在学习了本教程之后，我现在得到了这些错误

错误片段

EXCEPTION: Error: Uncaught (in promise): Template parse errors: Can't bind      to 'ngIf' since it isn't a known property of 'md-card-title'.
1. If 'md-card-title' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.
2. If 'md-card-title' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.  ("

        <md-card-title [ERROR ->]*ngIf="!showMessage && !isApproved">
            Please use the information below...
        </md-card-title> "): ReportListComponent@63:23 Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("

为什么ngIf指令突然不工作了?在我移动仪表板以在登录成功后惰性加载之前，它是工作的。

我一直在使用我上面发布的链接中的共享模块方法。使用共享模块不是导致此问题的原因吗?我假定模块共享是一种清理代码的方法，一旦一切正常工作，就不会重复东西，仅此而已。

我的Dashboard类似于上面链接中的HeroesList页面，在DashboardModule加载后，它会加载更多的页面。我已经在仪表板页面上的MVC端设置了断点，并确认仪表板和页面之后的延迟加载只有在成功登录。

该错误似乎无法获得核心angular引用和/或angular2材质库的引用。除了路由模块

之外，我已经把所有这些导入放到了所有可能有它们的模块中

import { NgModule }         from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';
import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';

我仍然得到上面代码片段中的错误。我还能错过什么呢?任何帮助或提示感谢。

编辑

Dashboard.Module.ts

import { NgModule }         from '@angular/core';
import { CommonModule }     from '@angular/common';
import { FormsModule } from '@angular/forms';

import { HttpModule }    from '@angular/http';
import { RouterModule } from '@angular/router';
import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';
import { AppService } from './app.service';
import { DashboardRoutingModule }  from './Dashboard-routing.Module';
@NgModule({
    imports: [  
                CommonModule, HttpModule, FormsModule, RouterModule, 
                MdRadioModule, MdToolbarModule, MdProgressBarModule,
                MdButtonModule, MdIconModule, MdListModule,
                MdCardModule, MdInputModule, MdToolbarModule,
                DashboardRoutingModule],
  /*declarations: [  DashboardComponent ],*/
  exports:      [  CommonModule  ],
  providers:    [ AppService ]
})
export class DashboardModule { }

DashBoardComponent.ts

import { Component }   from '@angular/core';
import { AppService } from './app.service';
@Component({
  template: `
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
  userName = '';
  constructor(service: AppService) {
    //this.userName = service.userName;
  }
}

dashboard-routing.Module.ts

import { NgModule }            from '@angular/core';
import { Routes, RouterModule }        from '@angular/router';
import { FormsModule } from '@angular/forms';
import { CommonModule }     from '@angular/common';
import { HttpModule }    from '@angular/http';
import { MdRadioModule } from '@angular2-material/radio';
import { MdToolbarModule } from '@angular2-material/toolbar';
import { MdButtonModule } from '@angular2-material/button';
import { MdIconModule } from '@angular2-material/icon';
import { MdProgressBarModule } from '@angular2-material/progress-bar';
import { MdListModule } from '@angular2-material/list';
import { MdInputModule } from '@angular2-material/input';
import { MdCardModule } from '@angular2-material/card';

import { DashboardComponent } from './DashBoardComponent';
import { ReportListComponent }  from './ReportListComponent';
import { ReportDetailComponent }  from './ReportDetailComponent';

const routes: Routes = [
  { 
    children: [
      { path: 'Home/ReportList',    component: ReportListComponent },
      { path: 'Home/ReportDetail/:reportId', component: ReportDetailComponent }
    ]
  }
];

@NgModule({
    imports: [RouterModule.forChild([routes])  
    ],
  declarations: [ DashboardComponent, ReportListComponent, ReportDetailComponent ],
  exports: [RouterModule, ReportListComponent, ReportDetailComponent, CommonModule]
})

export class DashboardRoutingModule {}

Answer 1

Dashboard组件现在是另一个模块的一部分，您需要将CommonModule导入该模块才能使用*ngIf指令。您不需要将CommonModule导入到AppModule，因为您在那里导入了BrowserModule, BrowserModule导入并导出了CommonModule，这意味着当您导入BrowserModule时，您将自动获得CommonModule。

Answer 2

今天我遇到了离子5这样的错误，这是因为我已经删除了路由器线，负责这个页面，因为它是一个模态。*ngIf和*ngFor都没有工作，直到我把它们的链接放回app.routing文件