Question

我最近开始使用共价数据表的原子组件，因为我要显示带有操作按钮的自定义列。现在我只是想绑定/显示我的数据，但出了点问题。我收到以下错误：

ng：///AppModule/CashierMaintenanceComponent.ngfactory.js：45错误类型错误：无法读取未定义的属性“名称”

我不知道是什么导致了这个...知道这里发生了什么/如何修复它？

my html code:

<br /><br /><br />
<div class="noOverflow" fxLayout fxLayoutAlign="center start" fxLayoutWrap>
    <div fxFlex="100%">
        <div fxLayout fxLayoutAlign="start start">
            <div fxFlex="50%">  
                <h1>Cashier Maintenance</h1>
            </div>
            <div fxFlex="40%" fxFlexOffset="60%">
                <button color="primary" mat-raised-button><mat-icon class="fa fa-plus"></mat-icon> New</button>
                <button mat-raised-button><mat-icon class="fa fa-edit"></mat-icon> Edit</button>
                <button mat-raised-button><mat-icon class="fa fa-trash"></mat-icon> Delete</button>
            </div>
        </div>
        <div fxLayout fxLayoutAlign="center start">
        <div fxFlex="100%">
            <mat-form-field floatPlaceholder="never">
                <input matInput #filterTbl placeholder="filter">
            </mat-form-field>
        </div>
    </div>

    <div fxLayout class="noOverflow" fxLayoutAlign="center start">
        <div fxFlex="80%" fxFlexOffset="10%">
        <div class="mat-elevation-z8 noOverflow">
            <table *ngIf="filteredEmployees.length > 0" td-data-table>
                <thead>
                    <tr td-data-table-column-row>
                        <th td-data-table-column [sortable]="true" [sortOrder]="ASC"  *ngFor="let column of columns">
                            {{column.label}}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr td-data-table-row *ngFor="let row of filteredEmployees">
                        <td td-data-table-cell="let column of columns">
                                {{row[column.name]}}
                        </td>
                    </tr>
                </tbody>
            </table>

            <td-paging-bar #pagingBar [pageSize]="pageSize" [total]="filteredTotal" (change)="page($event)">
                <span>Rows per page:</span>
                <mat-select class="noOverflow" [style.width.px]="50" [(ngModel)]="pageSize">
                    <mat-option *ngFor="let size of [10, 20, 50,100,200,500]" [value]="size">
                        {{size}}
                    </mat-option>
                </mat-select>
                <span class="noOverflow">{{pagingBar.range}} of {{pagingBar.total}}</span>
            </td-paging-bar>
        </div>
        </div>
    </div>
    </div>  
</div>


my ts/component code:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';

import { TdDataTableService, TdDataTableSortingOrder, ITdDataTableSortChangeEvent, ITdDataTableColumn } from '@covalent/core';
import { IPageChangeEvent } from '@covalent/core';

import { RestService } from '../../services/rest.service';
import { IEmployee } from '../../interfaces/employee.interface';

import { StringToDatePipe } from '../../pipes/string-to-date.pipe';

@Component({
  selector: 'app-cashier-maintenance',
  templateUrl: './cashier-maintenance.component.html',
  styleUrls: ['./cashier-maintenance.component.css']
})
export class CashierMaintenanceComponent implements OnInit {
    @ViewChild('filterTbl') filterTbl: ElementRef;
    employees: IEmployee[];
    filteredEmployees: IEmployee[] = [];
    filteredTotal: number = 100;
  columns: ITdDataTableColumn[] = [
  { name: 'EMP_ID', label: 'ID', sortable: true, width: 100 },
  { name: 'EMP_NM', label: 'Name', sortable: true, width: 200 },
  { name: 'EMP_TYP', label: 'Type', sortable: true, width: 200 },
  { name: 'TEL', label: 'Telephone', sortable: true, width: 200 },
  { name: 'ADDR', label: 'Address', sortable: true, width: 200 },
  { name: 'DT_STRT', label: 'Start Date', sortable: false, width: 200 }
];
searchTerm: string = '';
sortBy: string = 'EMP_NM';
fromRow: number = 1;
currentPage: number = 1;
pageSize: number = 10;
  sortOrder: TdDataTableSortingOrder = TdDataTableSortingOrder.Ascending;



  constructor(private _dataTableService: TdDataTableService, private restService: RestService)  { }

    sort(sortEvent: ITdDataTableSortChangeEvent): void {
        this.sortBy = sortEvent.name;
        console.log(sortEvent.name);
        this.filter();
    }

    search(searchTerm: string): void {
        this.searchTerm = searchTerm;
        this.filter();
    }

    page(pagingEvent: IPageChangeEvent): void {
        this.fromRow = pagingEvent.fromRow;
        this.currentPage = pagingEvent.page;
        this.pageSize = pagingEvent.pageSize;
        this.filter();
    }

    filter(): void {
        let newData: IEmployee[] = this.employees;
        let excludedColumns: string[] = this.columns
            .filter((column: ITdDataTableColumn) => {
                return ((column.filter === undefined && column.hidden === true) ||
                (column.filter !== undefined && column.filter === false));
            }).map((column: ITdDataTableColumn) => {
            return column.name;
        });
    newData = this._dataTableService.filterData(newData, this.searchTerm, true, excludedColumns);
    this.filteredTotal = newData.length;
    newData = this._dataTableService.sortData(newData, this.sortBy, this.sortOrder);
    newData = this._dataTableService.pageData(newData, this.fromRow, this.currentPage * this.pageSize);
    this.filteredEmployees = newData;
  }






  getEmployees() {
      this.restService.getEmployees() 
    .subscribe(
    (res) => {
        console.log(res);       
        this.employees = res;
        this.employees.forEach((emp: IEmployee) => {
            emp.DT_STRT = new StringToDatePipe().transform(emp.DT_STRT);
        });
        this.filter();
    }, (err) => {
        console.log(err);
    });
  }

  ngOnInit() {
         Observable.fromEvent(this.filterTbl.nativeElement, 'keyup')
        .debounceTime(150)
        .distinctUntilChanged()
        .subscribe(() => {
          this.searchTerm = this.filterTbl.nativeElement.value;
          this.filter();
        });

      this.getEmployees();
  }

}

Answer 1

您的td-data-table-row组件中存在拼写错误。您应该使用*ngFor。有关工作代码，请参阅this stackblitz

<tr td-data-table-row *ngFor="let row of filteredEmployees">
    <td td-data-table-cell *ngFor="let column of columns">
            {{row[column.name]}}
    </td>
</tr>

对于简单的用例，使用没有原子组件的数据表可以帮助避免更复杂的模板代码。只需将您的数据和配置作为输入传递给<td-data-table>

<td-data-table
  #dataTable
  [data]="filteredData"
  [columns]="columns"
  [sortable]="true"
  sortOrder="ASC"
  [style.height.px]="200">
</td-data-table>

共价数据表错误：无法读取未定义的属性“名称”

1 个答案: