不能绑定到“ngIf”，因为它不是“md-card-title”的已知属性。

Question

我正在使用Angular2 RC5材料库学习Angular2，并使用VisualStudio 2015.让它在AspNetCore 1.0应用程序中运行，我使用了一个运行完美的Angular2 RC5单页应用程序，并尝试引入延迟加载，其中只有登录页面才会首先加载。当我成功登录时，我希望加载其余的页面。

当我在SPA模式下单击登录按钮时，我会成功地重定向到使用登录页预加载的DashboardComponent页面--这是在我引入延迟加载之前。在遵循本教程之后，我现在得到以下错误

错误片段

例外:错误:未知(在承诺中)：模板解析错误:不能绑定到'ngIf‘，因为它不是一个已知的属性’md title‘。1.如果‘md卡标题’是一个角度组件，并且它有'ngIf‘输入，那么验证它是这个模块的一部分。2.如果‘message title’是一个Web组件，则在该组件的'@NgModule.schema‘中添加“@NgModule.schema”以抑制此消息。(“*ngIf="!showMessage && !isApproved">请使用下面的信息. ")：ReportListComponent@63:23属性绑定ngIf没有被嵌入模板上的任何指令使用。确保属性名拼写正确，并在“指令”部分列出所有指令。(“

为什么ngIf指令突然失效？在我移动仪表板以懒散的方式加载登录成功之前，它就已经开始工作了。

我一直走到使用共享模块的方法，在我上面张贴的链接。使用共享模块不是造成此问题的原因吗？我认为模块共享是一种清理代码的方法，一旦一切正常运行，就不再重复这些东西了，仅此而已。

我的仪表板类似于我上面所跟踪的链接中的HeroesList页面，在该链接中，DashboardModule加载时会加载更多的页面。我已经在MVC端的仪表板页面中放置了断点，并且确认了仪表板和之后的页面只在成功登录时才懒洋洋地加载。

这一误差似乎无法得到核心角度基准和/或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上遇到了这样一个错误，因为我删除了负责这个页面的路由器线路，因为它是一种模式。在我将链接放回app.routing文件之前，*ngIf或*ngFor都没有工作。