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

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

1 个答案: