Question

我尝试制作一个可重复使用的表组件我使用@input()为表格使用传递数据，但仅当我通过String无法通过Array时才有效。这是我的代码：
table.component.html

<div class="row">
  <div class="col-md-4">
    <input *ngIf="config.filtering" placeholder="Filter all columns"
           [ngTableFiltering]="config.filtering"
           class="form-control"
           (tableChanged)="onChangeTable(config)"/>
  </div>
</div>
<br>
<h2>{{caption}}</h2>
{{records}}
<ng-table [config]="config"
          (tableChanged)="onChangeTable(config)"
          (cellClicked)="onCellClick($event)"
          [rows]="rows" [columns]="columns">
</ng-table>
<pagination *ngIf="config.paging"
            class="pagination-sm"
            [(ngModel)]="page"
            [totalItems]="length"
            [itemsPerPage]="itemsPerPage"
            [maxSize]="maxSize"
            [boundaryLinks]="true"
            [rotate]="false"
            (pageChanged)="onChangeTable(config, $event)"
            (numPages)="numPages = $event">
</pagination>
<pre *ngIf="config.paging" class="card card-block card-header">Page: {{page}} / {{numPages}}</pre>

table.component.ts

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

@Component({
  selector: 'table-demo',
  templateUrl: './table-layout.component.html'
})
export class TableDemoComponent implements OnInit {
  @Input() caption: string;
  @Input() records: any[] = [];
  @Input() head: Array <any>;

  public rows:Array<any> = [];
  public columns:Array <any> = [
    { title: 'ID', name: 'id'},
    { title: 'Name', name: 'name'},
    { title: 'Class', name: 'class', sort: false},
    { title: 'Status', name: 'status'},
    { title: 'Enrolled courses', name: 'enrolled-courses'}
  ];
  public page:number = 1;
  public itemsPerPage:number = 10;
  public maxSize:number = 5;
  public numPages:number = 1;
  public length:number = 0;

  public config:any = {
    paging: true,
    sorting: {columns: this.columns},
    filtering: {filterString: ''},
    className: ['table-striped', 'table-bordered']
  };

  private data: any[] = this.records;

  public constructor() {
    this.length = this.data.length;
  }

  public ngOnInit():void {
    this.onChangeTable(this.config);
  }

  public changePage(page:any, data:Array<any> = this.data):Array<any> {
    let start = (page.page - 1) * page.itemsPerPage;
    let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
    return data.slice(start, end);
  }

  public changeSort(data:any, config:any):any {
    if (!config.sorting) {
      return data;
    }

    let columns = this.config.sorting.columns || [];
    let columnName:string = void 0;
    let sort:string = void 0;

    for (let i = 0; i < columns.length; i++) {
      if (columns[i].sort !== '' && columns[i].sort !== false) {
        columnName = columns[i].name;
        sort = columns[i].sort;
      }
    }

    if (!columnName) {
      return data;
    }

    // simple sorting
    return data.sort((previous:any, current:any) => {
      if (previous[columnName] > current[columnName]) {
        return sort === 'desc' ? -1 : 1;
      } else if (previous[columnName] < current[columnName]) {
        return sort === 'asc' ? -1 : 1;
      }
      return 0;
    });
  }

  public changeFilter(data:any, config:any):any {
    let filteredData:Array<any> = data;
    this.columns.forEach((column:any) => {
      if (column.filtering) {
        filteredData = filteredData.filter((item:any) => {
          return item[column.name].match(column.filtering.filterString);
        });
      }
    });

    if (!config.filtering) {
      return filteredData;
    }

    if (config.filtering.columnName) {
      return filteredData.filter((item:any) =>
        item[config.filtering.columnName].match(this.config.filtering.filterString));
    }

    let tempArray:Array<any> = [];
    filteredData.forEach((item:any) => {
      let flag = false;
      this.columns.forEach((column:any) => {
        if (item[column.name].toString().match(this.config.filtering.filterString)) {
          flag = true;
        }
      });
      if (flag) {
        tempArray.push(item);
      }
    });
    filteredData = tempArray;

    return filteredData;
  }

  public onChangeTable(config:any, page:any = {page: this.page, itemsPerPage: this.itemsPerPage}):any {
    if (config.filtering) {
      Object.assign(this.config.filtering, config.filtering);
    }

    if (config.sorting) {
      Object.assign(this.config.sorting, config.sorting);
    }

    let filteredData = this.changeFilter(this.data, this.config);
    let sortedData = this.changeSort(filteredData, this.config);
    this.rows = page && config.paging ? this.changePage(page, sortedData) : sortedData;
    this.length = sortedData.length;
  }

  public onCellClick(data: any): any {
    console.log(data);
  }
}

page.component.html

<div class="col-md-12 col-sm-12 col-xs-12">
    <table-demo [caption]="caption1"
                [records]="data1"></table-demo>
                {{data1}}
</div>

<div class="clearfix"></div>

<div class="col-md-12 col-sm-12 col-xs-12">
</div>

page.component.ts

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

@Component({
  selector: 'app-absence-requests',
  templateUrl: './absence-requests.component.html'
})
export class AbsenceRequestsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  public caption1:string = 'Nghĩa óc chó';
  public data1 = [{
        'id': '1353002',
        'name': 'Nguyễn Văn A',
        'class': '13CLC',
        'status': 'Active',
        'enrolled-courses': '4'
    }, {
        'id': '1353004',
        'name': 'Nguyễn Quốc Bảo',
        'class': '13CLC',
        'status': 'Reserved',
        'enrolled-courses': '2'
    }
  ];
  public head1: Array <any> = [
    { title: 'ID', name: 'id'},
    { title: 'Name', name: 'name'},
    { title: 'Class', name: 'class', sort: false},
    { title: 'Status', name: 'status'},
    { title: 'Enrolled courses', name: 'enrolled-courses'}
  ];
}

我想将data1中的page.component.ts传递给records中的table.component.ts

Answer 1

对不起，我发现解决办法就是将data: any[] = this.records;移到ngOnInit

将数组从组件传递到组件角度2

1 个答案: