Вопрос:

Таблица угловых материалов: невозможно связать с 'matRowDefColumn'

html angular typescript material

6518 просмотра

2 ответа

18 Репутация автора

Я пытаюсь использовать таблицу угловых материалов. Я импортировал модуль, но получаю ошибку разбора шаблона. HTML:

<mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.name}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="key">
    <mat-header-cell *matHeaderCellDef> Key </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.Key}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="reason">
    <mat-header-cell *matHeaderCellDef> reason </mat-header-cell>
    <mat-cell *matCellDef="let project">{{project.reason}}</mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; column: displayedColumns;"></mat-row>

</mat-table>

Импорт в компоненте:

import { Component, OnInit } from '@angular/core';
import {Observable} from "rxjs"
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { ProjectService } from '../services/project.service';
import { UserService } from '../services/user.service';
import { Subject } from 'rxjs/Subject';
import { DataSource } from '@angular/cdk/collections';

Источник данных: я возвращаю массив как наблюдаемый с returnDeadProjectList()

export class ProjectDataSource extends DataSource<any>{
constructor(private project:ProjectComponent){
  super();
}

connect(): Observable<Project[]>{
return this.project.returnDeadProjectList();
}

disconnect(){}

Импорт из app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from "@angular/common";
import 'hammerjs';
import { ProjectService } from './services/project.service';
import { UserService } from './services/user.service';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatInputModule, MatButtonModule, MatExpansionModule, MatDatepickerModule, MatNativeDateModule, MatToolbarModule, MatListModule, MatIconModule, MatProgressSpinnerModule, MatSlideToggleModule, MatTableModule, MatPaginatorModule } from '@angular/material';
import { AppComponent } from './app.component';
import { MyFormComponent } from './my-form/my-form.component';
import { BitbucketComponent } from './bitbucket/bitbucket.component';
import { UserComponent } from './user/user.component';
import { ProjectComponent } from './project/project.component';
import { CdkTableModule } from '@angular/cdk/table';

Я получаю ошибку:

compiler.js:466 Uncaught Error: Template parse errors:
Can't bind to 'matRowDefColumn' since it isn't a known property of 'mat-row'.
1. If 'mat-row' is an Angular component and it has 'matRowDefColumn' input, then verify that it is part of this module.
2. If 'mat-row' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Если я пишу CUSTOM_ELEMENTS_SCHEMAв, schemas: [ ],я получаю другую ошибку:

compiler.js:466 Uncaught Error: Template parse errors:
Property binding matRowDefColumn 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 *matHeaderRowDef="displayedColumns"></mat-header-row>
      [ERROR ->]<mat-row *matRowDef="let row; column: displayedColumns;"></mat-row>

У кого-нибудь есть идея, что мне не хватает? У меня должен быть весь импорт, в котором я нуждаюсь, но так или иначе это не может найти элементы. Кроме того, я даже не используюmatHeaderRowDef

Автор: Joel Suter Источник Размещён: 10.11.2017 08:16

Ответы (2)


-1 плюса

14 Репутация автора

Решение

Добавьте этот код в свой .component.ts и в app.module.shared.ts .

Меня устраивает

 import {
    MatPaginator, MatSort, MatTable, MatTableModule, MatTabHeader,
    MatHeaderRow, MatHeaderCell, MatHeaderCellDef, MatHeaderRowDef,
    MatSortHeader, MatRow, MatRowDef,  MatCell, MatCellDef,
    _MatCell, _MatCellDef, _MatHeaderCellDef, _MatHeaderRowDef
} from '@angular/material';
@NgModule({
    imports: [MatPaginator, MatSort, TableDataSource,
        CdkTableModule, MatTable, MatTableModule],
    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
    declarations: [
        MatTabHeader,
           MatHeaderRow,
        MatHeaderCell,
        MatHeaderCellDef,
        MatHeaderRowDef,
        MatSortHeader,
            MatRow,
        MatRowDef,
        MatCell,
        MatCellDef,
        _MatCell,
        _MatCellDef,
        _MatHeaderCellDef,
        _MatHeaderRowDef
    ]
})
Автор: Lastivez Размещён: 12.11.2017 01:12

0 плюса

1 Репутация автора

У фрагмента кода <mat-row *matRowDef="let row; column: displayedColumns;"></mat-row> есть проблема с именем свойства. MatRowDef имеет столбцы свойств, а не столбец. Измените это на, <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>и это должно работать после этого.

Автор: Amit kumar Размещён: 25.06.2018 08:29
Вопросы из категории :
32x32