时间戳

首页 > 解决方案 > 将字符串数组传递给 ngx-datatable 时出错

angular - 将字符串数组传递给 ngx-datatable 时出错

问题描述

我有一个角度组件，我尝试将descirptions属性从组件传递到模板。我需要数组中的每个项目来代表表中的一行。下面是我的组件和模板：

import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { DownloadPageService } from './download-page.service';
import { DatatableComponent } from '@swimlane/ngx-datatable';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';

@Component({
  selector: 'app-download-page',
  templateUrl: './download-page.component.html',
  styleUrls: ['./download-page.component.scss']
})
export class DownloadPageComponent implements OnInit {
  @ViewChild('tableWrapperList') tableWrapper;
  @ViewChild('tableList') table: DatatableComponent;
  currentComponentWidth;
  operations:any;
  filter: FormGroup = null;
  tradeDate: any;
  descriptions: string[] = [
    'Arquivo 1',
    'Arquivo 2',
    'Arquivo 3'
  ];

  constructor(private downloadPageService: DownloadPageService,
              private ref: ChangeDetectorRef,
              private fb: FormBuilder) 
              { 
                this.filter = fb.group({
                  tradeDate: new FormControl(new Date())
                });
              }

  ngOnInit() { 
    this.tradeDate = this.filter.get('tradeDate').value;
    this.getOperations()
    this.descriptions;
  }

  getOperations() {
    this.downloadPageService.getData()
                            .subscribe(source => this.operations = source);
  }

  ngAfterContentChecked(){
    if (this.table && this.table.recalculate && (this.tableWrapper.nativeElement.clientWidth !== this.currentComponentWidth)) {
      setTimeout(() => {         
        this.currentComponentWidth = this.tableWrapper.nativeElement.clientWidth;
        this.table.recalculate();
        this.ref.detectChanges();

        window.dispatchEvent(new Event('resize'));
      }, 300);
    }
  }
}

模板：

<div class="row">
  <div class="table table-responsive mt-0">
    <div class="bg-black table-responsive collapse-border" #tableWrapperList>
    <ngx-datatable #tableList 
                class='table mt-0 table-hover table-stripped expandable'
                [columnMode]="'flex'"
                [rows]="descriptions"
                [rowHeight]="'35'"
                [headerHeight]="40"               
                [footerHeight]="40"
                [reorderable]='false'                
                >
                <ngx-datatable-column [flexGrow]=5 name="Descrição" [sortable]="false" cellClass="d-flex align-items-center text-center" headerClass="text-center">
                  <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
                    {{value}}
                  </ng-template>
                </ngx-datatable-column>
                
                <ngx-datatable-column [flexGrow]=2 name="" [sortable]="false" cellClass="d-flex align-items-center text-center" headerClass="text-center">
                  <ng-template ngx-datatable-cell-template>
                    <strong>Arquivo Geral</strong>
                  </ng-template>
                </ngx-datatable-column>    
      </ngx-datatable>
    </div>
  </div>
</div>

但是，在迭代描述时，我犯了以下错误：

Error: Error trying to diff 'Arquivo 1'. Only maps and objects are allowed

有人能帮我吗？

标签： angular

解决方案

使用row代替value：

<ngx-datatable-column [flexGrow]=5 name="Descrição" [sortable]="false" cellClass="d-flex align-items-center text-center" headerClass="text-center">
   <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
      {{row}}
   </ng-template>
</ngx-datatable-column>

推荐阅读