显示地图键数组中除 [0] 之外的所有元素答案

【问题标题】：Displaying all but [0] element of map key arrays显示地图键数组中除 [0] 之外的所有元素
【发布时间】：2019-02-27 02:12:40
【问题描述】：

这个问题的前提是，在下面的 TS 块中，我正在创建一个由给定地图的键和控制台日志记录组成的数组，以确保根据需要创建数组。

  public certKeys: String[];
  public certMap: Map<String, DataObject[]> = new Map();
  public allData: DataObject[];

  @Input()
  set data(data: DataObject[]) {
    if (!data) { return; }
    new Set(data.map(i => i.certTypeDescription)).forEach(i => {
      this.certMap.set(i, []);
    });

    data.forEach(i => {
      this.certMap.get(i.certTypeDescription).push(i);
    });

    this.certKeys = Array.from(this.certMap.keys());
    this.allData = data;

    console.log(this.certMap);
  }

现在，当它转换为它的 HTML 部分时，我想显示每个键数组的最新记录（或 [0] 元素）。这已经在实现。但是，另一部分是在手风琴下拉菜单中，我需要检索除 [0] 元素之外的其余元素。下面你会看到我到目前为止所拥有的：

<app-basic-card myTitle="Data">
  <i cardIcon class="uxd uxd-mode-edit uxd-lg uxd-pointer text-primary" (click)="openEditDialog()"></i>
  <div cardBody class="accordion" *ngIf="allData; else loading">
    <p *ngIf="allData?.length === 0">
      No allData found...
    </p>
    <mat-accordion *ngIf="allData?.length>0">
      <mat-expansion-panel *ngFor="let cert of certKeys">
        <mat-expansion-panel-header>
          <mat-panel-title class="list-group list-group-flush">
            <ng-container>
              <div>
                <div class="w-50 float-left">{{cert}}</div>
                <div class="w-50 float-right">
                  <i class="uxd uxd-lg" [ngClass]="getCertIcon(certMap.get(cert)[0]?.certificationResult)"></i>&nbsp;
                  {{getDateTaken(certMap.get(cert)[0].certificationDate)}}
                </div>
              </div>
            </ng-container>
          </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-container>
          <div *ngFor = "let certKeys of allData">
            <div class="w-50 float-left">{{cert}}</div>
            <div class="w-50 float-right">
              <i class="uxd uxd-lg" [ngClass]="getCertIcon(certMap.get(cert).certificationResult)"></i>&nbsp;
              {{getDateTaken(certMap.get(cert).certDate)}}
            </div>
          </div>
        </ng-container>
      </mat-expansion-panel>
    </mat-accordion>
  </div>
  <ng-template cardLoading #loading class="text-center">
    <mat-spinner class="loading-spinner" style="margin:0 auto;" diameter="50"></mat-spinner>
  </ng-template>
</app-basic-card>

我的问题是如何完成检索每个元素，但每个键数组的 [0] 元素除外？我很明显缺少一些东西。我将不胜感激给出的任何答案和可能为我指明正确方向的资源。我感谢大家的时间。

【问题讨论】：

标签： arrays angular typescript key-value

【解决方案1】：

我不知道 Angular tbh，但如果您可以修改数组，您可以使用 slice 方法，该方法返回原始数组的浅表副本，因此原始数组将保持不变。

你能改变这一行：

<div *ngFor = "let certKeys of allData">

进入这个：

<div *ngFor = "let certKeys of allData.slice(1)">

slice() 函数的工作 sn-p。

const items = [1, 2, 3, 4];

const itemsWithoutTheFirstItem = items.slice(1);

// Target array contains all but first item
console.log(itemsWithoutTheFirstItem);

// Original array stays the same
console.log(items);

【讨论】：

不幸的是，在尝试时，它不起作用。我什至想尝试 ng-repeat 和 index，但我认为问题在于它只查看有多少数组，而不是尝试显示每个数组中的所有值。
如何在组件内创建一个函数来返回除 N 项之外的所有项？像getCertKeys(startingIndex) { return this.certKeys.slice(startingIndex) }; 这样的东西？然后您可以使用this.getCertKeys(1); 调用它。
startingIndex 代表什么样的变量？
它将定义您要从一开始就删除的元素数量。您不必这样做，但它比创建getAllButFirstCertKeys() 更通用。当我想到它时，将其命名为getCertKeysFromIndex(startingIndex) 是有意义的。

【解决方案2】：

我现在想到了两个选择。第一个是使用*ngIf 或简单的管道。

第一个选项：

<mat-expansion-panel *ngFor="let cert of certKeys; let index = index">
    <mat-expansion-panel-header *ngIf="index > 0">
    ...
</mat-expansion-panel>

第二个选项：

创建一个Angular Pipe，它返回一个新数组，除了第一个条目：

@Pipe({name: 'ignoreFirst'})
export class IgnoreFirstEntryPipe implements PipeTransform {

    transform(arr: any[]) {
        // Returns a new array without the original first entry
        return arr.slice(1); 
    }

}

在你的 html 中：

<mat-expansion-panel *ngFor="let cert of certKeys | ignoreFirst">
    <mat-expansion-panel-header>
    ...
</mat-expansion-panel>

【讨论】：