无法绑定到“ mdMenuTriggerFor”,因为它不是“ button”的已知属性

时间:2018-10-05 13:49:50

标签: javascript angular angular-material

使用ng serve运行我的角度应用程序时出现此错误:

Can't bind to 'mdMenuTriggerFor' since it isn't a known property of 'button'

我已经导入了所有需要的东西,所以我不明白为什么会发生。

module.ts:

.......
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BrowserModule } from '@angular/platform-browser';
import { MyDialogComponent } from './components/my-dialog/my-dialog.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatInputModule, MatProgressSpinnerModule, MatCardModule, MatIconModule } from '@angular/material';
import { MatMenuModule} from '@angular/material/menu';
import 'hammerjs';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    MainComponent,
    MyDialogComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    ReactiveFormsModule,
    FormsModule,
    MatDialogModule, MatButtonModule, MatCheckboxModule, MatToolbarModule, MatInputModule, MatProgressSpinnerModule, MatCardModule, MatMenuModule, MatIconModule
  ],
  entryComponents: [MyDialogComponent],
  providers: [DataService],
  bootstrap: [AppComponent]
})
export class AppModule { }

html:

<mat-toolbar>My App


  <span class="spacer"></span>
  <button md-icon-button [mdMenuTriggerFor]="menu">
      <md-icon>more_vert</md-icon>
    </button>

</mat-toolbar>

任何原因导致此错误?我的意思是所有内容都是导入的,您为什么可以看到它为什么不能正常运行?

2 个答案:

答案 0 :(得分:1)

如果您使用的是最新的@angular/material依赖关系,则应将其替换为matMenuTriggerFor(不推荐使用mdMenuTriggerFor

<button mat-icon-button [matMenuTriggerFor]="menu">
   <mat-icon>more_vert</mat-icon>
</button>

当然要导入您的模块

import {MatMenuModule} from '@angular/material/menu';

并将其添加到imports块中。

https://material.angular.io/components/menu/api

答案 1 :(得分:0)

如果您使用的角钢和材料的最新版本,则名称已更改。 mdMenuTriggerFor已变成matMenuTriggerFor,依此类推,即基本上md到处都被mat取代。您的示例在这里显示为...

<button mat-icon-button [matMenuTriggerFor]="menu"> <mat-icon>more_vert</mat-icon> </button>

如果您使用的是较旧版本的Angular / Materials,也许您没有将菜单模块从材料导入项目中?