Angular 存儲彈出刪除的項目以按順序添加回來

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());
    }
}