嵌入式模板上的任何指令均未使用属性绑定matFooterRowDef

Question

我是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添加了定义使用<ng-container>。我收到错误消息。

component.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>

component.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

Answer 1

我知道了。我使用的是Angular Material版本5.2.7，其中不包含mat-footer-row。