Question

我一直试图显示服务器中的数据列表。问题是它显示“没有要显示的数据”，但是以某种方式可用数据。我检查过控制台中没有错误。

我正在使用Angular 7和Bootstrap4。请为我提供帮助。

下面是我的代码，谢谢。

HTML：

<ngx-datatable class="bootstrap datatable-flush" *ngIf="(fromEdmPaging$ | async).length > 0"
                        [rows]="(fromEdmPaging$| async)?.excelTemplateM1Dto"
                        [columnMode]="'force'"
                        [loadingIndicator]="tableLoading$ | async"
                        [headerHeight]="50"
                        [footerHeight]="50"
                        [rowHeight]="'auto'"
                        [selected]="selectedReports"
                        [selectionType]="'checkbox'"
                        (select)="onSelect($event)"
                        [sorts]="[
                        { prop: 'wellName', dir: 'asc' }
                        ]"
                        [externalPaging]="true"
                        [count]="(fromEdmPaging$ | async)?.paging?.totalItems"
                        [offset]="(fromEdmPaging$ | async)?.paging?.pageNumber - 1"
                        [limit]="(fromEdmPaging$ | async)?.paging?.pageSize"
                        (page)="onPageChange($event)"
                        >

TS：

   public fromEdmPaging$ = this.fromEdmService.fromEdmPaging$;


public postEdmPaging() {
    this.tableLoading$.next(true);

    this.formFilter.valueChanges
      .pipe(
        startWith(this.formFilter.value),
        debounceTime(600),
        distinctUntilChanged(),
        takeUntil(this.destroy$),
        switchMap((formValue) => {
          this.pagingOption.PageNumber = 1;
          this.pagingOption.PageSize = formValue.limit;

          this.filterOption.wellName = formValue.wellName;

          return this.fromEdmService.postEdmPaging(this.pagingOption, this.filterOption).pipe(
            takeUntil(this.destroy$),
            tap(() => this.tableLoading$.next(false))
          );
        })
      )
      .subscribe();
  }

服务

public fromEdmPaging$: Observable<any>;
private _fromEdmPaging: BehaviorSubject<any>;

constructor(private apiService: ApiService, private http: HttpClient) {
this._fromEdmPaging = <BehaviorSubject<any>>new BehaviorSubject({});
 this.fromEdmPaging$ = this._fromEdmPaging.asObservable();
}

public postEdmPaging(queryString, params){

        return this.apiService
          .postWithParams(`FromEdm/fromEdmPaging`, queryString, params)
          .pipe(
            map((result) => {

            this._fromEdmPaging.next(Object.assign([], result.body.excelTemplateM1Dto));

            return result;
            })
          );
      }

Answer 1

请找到以下代码段。这对我有用。

HTML：

<ngx-datatable #mydatatable class="bootstrap"  [sortType]="'multi'"  [headerHeight]="50" [footerHeight]="40" [rowHeight]="'auto'" [rows]="rows" [columnMode]="'force'" [limit]="5" [loadingIndicator]="loadingIndicator">
    <ngx-datatable-column name="Up">
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">
            <button (click)="move('up', row.name)">Up</button>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Name">
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
            <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true" *ngIf="!editing[rowIndex + '-name']">
          {{value}}
        </span>
            <input autofocus (blur)="this.updateValue($event, 'name', rowIndex)" *ngIf="editing[rowIndex+ '-name']" type="text" [value]="value"
            />
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Gender">
        <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row" let-value="value">
            <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true" *ngIf="!editing[rowIndex + '-gender']">
          {{value}}
        </span>
            <select *ngIf="editing[rowIndex + '-gender']" (blur)="editing[rowIndex + '-gender'] = false" (change)="this.updateValue($event, 'gender', rowIndex)"
             [value]="value">
          <option value="male">Male</option>
          <option value="female">Female</option>
        </select>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Company">
        <ng-template ngx-datatable-cell-template let-value="value">
            <child-component [inputVal]="value"></child-component>
        </ng-template>
    </ngx-datatable-column>

    <ngx-datatable-column name="Age">
        <ng-template ngx-datatable-cell-template let-value="value">
            {{value}}
        </ng-template>
    </ngx-datatable-column>

</ngx-datatable>

打字稿控制器：

import { Component, OnInit } from '@angular/core';
import { SelectionType } from '@swimlane/ngx-datatable';
import * as _ from 'lodash';

@Component({
  selector: 'app-ngxtable',
  templateUrl: './ngxtable.component.html',
  styleUrls: ['./ngxtable.component.css']
})
export class NgxtableComponent implements OnInit {

  editing = {};
  rows = [];
  columns = [];

  loadingIndicator: boolean = true;
  reorderable: boolean = true;

  constructor() {
    setTimeout(() => { this.loadingIndicator = false; }, 5000);
    this.fetch((data) => {
      this.rows = data;
    });
  }

  fetch(cb) {
    const req = new XMLHttpRequest();
    req.open('GET', 'https://unpkg.com/@swimlane/ngx-datatable@6.3.0/assets/data/company.json');
    req.onload = () => {
      cb(JSON.parse(req.response));
    };
    req.send();
  }

  ngOnInit() {
    this.columns = [
      { prop: 'name' },
      { name: 'Gender' },
      { name: 'Company' }
    ];
  }

  move(direction, reference): void {
    if (event.type === 'click') {
      this.rows = this.moveItemInArray(this.rows, reference, direction);
      this.rows = [...this.rows];
    }
  }

  moveItemInArray(items, reference, direction) {
    let returnVar = _.cloneDeep(items);
    let old_index = _.findIndex(items, function(item) {
      return item['name'] == reference;
    });
    let new_index = direction === 'up' ? old_index - 1 : old_index + 1;
    if (new_index >= returnVar.length) {
      let i = new_index - returnVar.length + 1;
      while (i--) {
        returnVar.push(undefined);
      }
    }
    returnVar.splice(new_index, 0, returnVar.splice(old_index, 1)[0]);
    return returnVar;
  }
}

请找到Stackblitz链接here。

Answer 2

我认为您不仅需要通过行为主题来遍历整个表行，还可以更改此行：

this._fromEdmPaging.next(Object.assign([], result.body.excelTemplateM1Dto));

至：

this._fromEdmPaging.next(Object.assign({}, result.body));

数据未显示在表中，但实际上存在

2 个答案: