angular - 使用表单从表中获取所有数据（Angular - ngx-datatable）

Question

我正在使用 Angular 和 ngx-datatable 插件来显示数据系列。我已经将此表包装在一个表单中，并在其上添加了几个控件（输入隐藏，id 行、复选框和选择），以便稍后根据所选值在组件中修改所述数据。

我的意图是大规模更新它们，即对表格的每一行进行相关的更改，并将它们中的每一个的（隐藏的 id + 复选框值 + 选择值）发送到组件。问题是什么 ？通过提交数据（按表单的提交按钮），我只从表格中获取正在显示的当前页面的记录，而不是获取所有页面的所有记录。

我仍然是这个框架的新手，事实是它让我很头疼。我把我当前的代码放在下面，我还尝试通过@Viewchildren 参考隐藏输入列表（#idsUsers）、复选框（#addToGroup）和选择（#roleGroup），但我总是得到那些页面正在从表格中显示，而不是能够获得所有这些。非常感谢您！

HTML：

<!--Form definition-->
<form #colaboratos="ngForm" id="formColaborators" (ngSubmit)="onSubmit(colaboratos.value)" novalidate>

   <!-- Data table -->
  <ngx-datatable
    #userList
    class="material ml-0 mr-0"
    [rows]="itemsUsers"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [scrollbarH]="true"
    [limit]="6"
    [rowHeight]="50"
    (activate)="onActivate($event)">
    <ngx-datatable-column prop="idUser" name="ID" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.id }}
        <!--We store user id for data update-->
        <mat-form-field [hidden]="true">
          <input 
            #idsUsers
            matInput
            value="row.id"
            id="idUser_{{row.id}}"
            class="idUser"
            name="idUser_{{row.id}}"
            type="text"
            [(ngModel)]="row.id">
        </mat-form-field>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="userFirstName" name="FIRST NAME" [sortable]="true" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.firstName }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="userSurname" name="SURNAME" [sortable]="true" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.lastName }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="userEmail" name="EMAIL" [sortable]="true" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        {{ row?.email }}
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="userAddtoGroup" name="ADD TO GROUP" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        <mat-checkbox 
          #addToGroup
          [ngModel]="belongstoresearchgroup(row.id)"
          name="addToGroup_{{row.id}}"
          id="addToGroup_{{row.id}}"
          class="addToGroup"
          >
        </mat-checkbox>
      </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column prop="userRole" name="ROLE" [flexGrow]="1">
      <ng-template let-row="row" ngx-datatable-cell-template>
        <mat-select
        #roleGroup
        matInput
        name="roleGroup_{{row.id}}"
        [ngModel]="roleAssign(row.id)"
        id="roleGroup_{{row.id}}"
        class="roleGroup">
          <mat-option *ngFor="let role of rolesGroup" [value]="role.id">
            {{role.scopeTr}}
          </mat-option>
        </mat-select>
      </ng-template>
    </ngx-datatable-column>
  </ngx-datatable>
<!-- /End of form-->
</form>

零件：

import { Component, OnInit, OnDestroy, ViewChild, ViewChildren, QueryList } from '@angular/core';
import { ColaboratorsService } from '../colaborators.service';
import { MatDialog, MatSnackBar } from '@angular/material';
import { AppConfirmService } from '../../../../shared/services/app-confirm/app-confirm.service';
import { AppLoaderService } from '../../../../shared/services/app-loader/app-loader.service';
import { Subscription} from 'rxjs';
import { egretAnimations } from "../../../../shared/animations/egret-animations";
import { Router, ActivatedRoute } from '@angular/router';

import { ApiService } from '../../../../shared/services/api.service';
import { AuthenticationService } from './../../../../shared/services/authentication.service';

import { User } from './../../../../shared/models/user.model';
import { Role } from './../../../../shared/models/role.model';

@Component({
  selector: 'app-colaborators-table',
  templateUrl: './colaborators-table.component.html',
  animations: egretAnimations
})
export class ColaboratorsTableComponent implements OnInit, OnDestroy {
  @ViewChildren('idsUsers') listidsUsers:QueryList<any>;
  @ViewChildren('addToGroup') listCheckboxAddToGroup:QueryList<any>;
  @ViewChildren('roleGroup') listSelectRoleGroup:QueryList<any>;

  public itemsUsers: any = [];
  public rolesGroup: Role[] = [];

  public itemUser: User;

  currentUser: User;

  loading = false;
  submitted = false;

  constructor(
    private actRoute: ActivatedRoute,
    private dialog: MatDialog,
    private snack: MatSnackBar,
    private colaboratorsService: ColaboratorsService,
    private authenticationService: AuthenticationService,
    private confirmService: AppConfirmService,
    private loader: AppLoaderService,
    private router: Router,
    private apiService: ApiService
  ) { }

  ngOnInit(): void {
    if(!window.localStorage.getItem('currentUser')) {
      this.router.navigate(['/sessions/login']);
      return;
    }

    this.loadRolesGroupInvestigation();

    this.actRoute.data.subscribe(() => {
      this.itemsUsers = this.actRoute.snapshot.data.users;
      this.temp = [...this.actRoute.snapshot.data.users];
    });
  }


  belongstoresearchgroup(id): boolean {
    let belongsgroup = false;
    let item = this.itemsUsers.find(x => x.id === id);

    if(Object.keys(item.investigationGroupUser).length){
      belongsgroup = true;

    }
    return belongsgroup;
  }


  roleAssign(id): string {
    let idRoleAsignado = '';
    let item = this.itemsUsers.find(x => x.id === id);

    if(Object.keys(item.investigationGroupUser).length){
      idRoleAsignado = item.investigationGroupUser.roleId;
    }
    return idRoleAsignado;
  }


  onActivate(event) {
    if(event.type == 'click') {
        console.log(event.row);
    }
  }

  onSubmit(val) {
    alert("form send");
    //I only get records from the page of the table being displayed when you click save form

    //first method (data send from form)
    console.log(val);

    //second method (data from viewchildren)
    console.log(this.idsUsers.toArray());
    console.log(this.addToGroup.toArray());
    console.log(this.roleGroup.toArray());
  }


  loadRolesGroupInvestigation() {
    return this.apiService.GetRoles().subscribe(data => {
      this.rolesGroup = data['list'];
      data['list'].forEach(role=>{
        if(role.statusTr == "Active" && !role.deletedById){
          this.rolesGroup.push(role);
        }
      });
    })
  }
}

标签： angularformspaginationngx-datatable