Получить все данные из таблицы, используя форму (Angular - ngx-datatable) - PullRequest
Новая
       55

Получить все данные из таблицы, используя форму (Angular - ngx-datatable)

0 голосов
/ 17 апреля 2020

Я использую Angular с плагином ngx-datatable для отображения серии данных. Я обернул эту таблицу в форму и добавил к ней несколько элементов управления (скрытый ввод с строкой идентификатора, флажок и выберите), чтобы позже изменить указанные данные в компоненте в соответствии с выбранными значениями.

Мое намерение состоит в том, чтобы массово обновите их, то есть внесите соответствующие изменения в каждую из строк таблицы и отправьте (скрытый идентификатор + значение флажка + выбранное значение) каждой из них в компонент. В чем проблема ? Отправляя данные (нажмите кнопку отправки формы), я получаю только записи текущей страницы, отображаемой из таблицы, вместо получения всех записей всех страниц.

Я все еще новичок в этом контексте, и правда в том, что он доставляет мне много головной боли. Я поместил свой текущий код ниже, я также попытался сделать это через @Viewchildren со ссылкой на список скрытых входных данных (#idsUsers), флажок (#addToGroup) и select (#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);
        }
      });
    })
  }
}
...