angular - 嵌入式模板上的任何指令均未使用属性绑定 matFooterRowDef
问题描述
我是 Angular Material 的新手,我想在mat-footer-row
表格之后添加一个,mat-row
但是在添加单元格定义后,我收到以下错误消息
**Property binding matFooterRowDef 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 "@NgModule.declarations". ("</mat-header-row>
<mat-row *matRowDef="let myRowData; columns :displayColumns"></mat-row>
[ERROR ->]<mat-footer-row *matFooterRowDef="['loading']"> </mat-footer-row>
</mat-table>
</div>
"):**
尽管我使用数组添加了属性绑定['loading']
。并添加了Footer
using的定义<ng-container>
。我收到错误消息。
组件.html
<ng-container matColumnDef='loading'>
<mat-footer-cell *matFooterCellDef colspan="6">
loading...
</mat-footer-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayColumns"></mat-header-row>
<mat-row *matRowDef="let myRowData; columns :displayColumns"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']"> </mat-footer-row>
</mat-table>
组件.ts
import { RecentuploaddialogsComponent } from "../../Dialog/recentuploaddialogs/recentuploaddialogs.component";
import { MatDialog, MatDialogConfig, MatTableDataSource } from "@angular/material";
@Component({
selector: 'app-recentupload',
templateUrl: './recentupload.component.html',
styleUrls: ['./recentupload.component.css']
})
export class RecentuploadComponent implements OnInit {
counter: number = 0;
private userName: string;
private password: string = "Password";
private listData : MatTableDataSource<any>;
private displayColumns: string[] = ["Col1", "Col2", "Col3"];
```
app.module.ts
```
import { UtilitiesModule } from "./utilities/utilities.module";
import 'hammerjs';
//import { NgxNavigationWithDataComponent } from "ngx-navigation-with-data";
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
RecentuploaddialogsComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
BrowserAnimationsModule,
UtilitiesModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([
{ path: '', component: LoginComponent },
{ path: 'login', component: LoginComponent },
{ path: 'header-links', component: HeaderLinksComponent },
{
path: 'dashboard',
component: DashboardComponent,
children:
[
... ChildRoutes
]
},
]),
Ng2SearchPipeModule
],
providers: [MenuService, LoginService/*,NgxNavigationWithDataComponent*/, UserRoles],
entryComponents : [RecentuploaddialogsComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
```
Utilities.module.ts
```
import { NgModule } from '@angular/core';
import { MatDialogModule, MatButtonModule} from "@angular/material";
import { MatTableModule } from '@angular/material';
const MaterialComponents = [
MatDialogModule,
MatButtonModule,
MatTableModule
]
@NgModule({
imports: [MaterialComponents],
exports: [MaterialComponents]
})
export class UtilitiesModule { }
```
My Angular Material Modules are loaded through Utilities Module.
Could anyone pls help me
Thanks in advance
解决方案
我想到了。我使用的是 Angular Material 版本 5.2.7,它不包含mat-footer-row
.