javascript - Angular store pop 删除的项目按顺序添加回来

Question

我一直在尝试按顺序从数组中删除和添加项目。似乎 pop 从数组中删除了项目，不允许它返回到数组中以供以后显示。此代码使用 Angular 8 网站示例中的添加和删除列。

我试过在元素上设置++、-- 等。我相信这很容易做到，但我就是做不到。按照代码当前设置的方式，它可以很好地删除一个列，只是由于 pop 破坏它而将其放回未定义？当前设置为添加一个随机列，我不想要。

import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { TestService } from '../json.service';

export interface DataTable {
  Id: number;
  Name: string;
  Phone: number;
  Email: string;
  Company: string;
  City: string;
  Url: string;
}

@Component({
  selector: 'app-data-table',
  styleUrls: ['data-table.component.css'],
  templateUrl: 'data-table.component.html',
})

export class DataTableComponent implements AfterViewInit {
constructor(private svc: TestService, private http: HttpClient) {
 /* this.svc.printToConsole('HttpClient services are running');*/
}
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
@ViewChild(MatSort, {static: false}) sort: MatSort;

  DataTable: string [];
  displayedColumns: string[] = ['Id', 'Name', 'Phone', 'Email', 'Company', 'City', 'Url'];
  columnsToDisplay: string[] = this.displayedColumns.slice();
  dataSource = new MatTableDataSource(this.DataTable);

  ngAfterViewInit() {
    this.http.get('./assets/data/sampledata.json').subscribe(
      data => {
        this.DataTable = data as string [];
        this.dataSource.data = this.DataTable;
        this.dataSource.sort = this.sort;
        this.dataSource.paginator = this.paginator;
      },
      (err: HttpErrorResponse) => {
        console.log (err.message);
      }
    );
  }

  addColumn() {
    if (this.columnsToDisplay.length < 7) {
    const randomColumn = Math.floor(Math.random() * this.displayedColumns.length);
    this.columnsToDisplay.push(this.displayedColumns[randomColumn]);
  }
}

  removeColumn() {
    if (this.columnsToDisplay.length > 3) {
      this.columnsToDisplay.pop();
    }
  }

  shuffle() {
    let currentIndex = this.columnsToDisplay.length;
    while (0 !== currentIndex) {
      const randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // Swap
      const temp = this.columnsToDisplay[currentIndex];
      this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
      this.columnsToDisplay[randomIndex] = temp;
    }
  }
}




<div class="ng-container">
    <button mat-raised-button (click)="addColumn()"> Add Column </button>
    <button mat-raised-button (click)="removeColumn()"> Remove Column </button>
    <button mat-raised-button (click)="shuffle()"> Shuffle </button>
<table mat-table [dataSource]="dataSource" matSort  class="mat-elevation-z8">
          <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
              <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
              <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
            </ng-container>
    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
  </table>
  <mat-paginator [length]="30"
  [pageSize]="5"
  [pageSizeOptions]="[5, 10, 20, 30]" showFirstLastButtons>
</mat-paginator>
</div>

我需要添加列以从左到右的连续数组顺序添加最多 7 个原始项目，并按从右到左最少 3 列的顺序删除。

Answer 1

如果我对您的问题的理解是正确的，您只是希望能够从数组中弹出项目，然后稍后以与弹出它们相反的顺序将它们推回？

这里最简单的事情就是只存储你弹出的值:

poppedItems: string[] = [];

removeColumn() {
    if (this.columnsToDisplay.length > 3) {
        this.poppedItems.push(this.columnsToDisplay.pop());
    }
}

addColumn() {
    if (this.columnsToDisplay.length < 7) {
        this.columnsToDisplay.push(this.poppedItems.pop());
    }
}