角度排序和拆分和陣列-有解無憂

如果這是一個愚蠢的問題，我提前道歉，但 Angular 和 Typescript 不是我的強項。我正在幫助一個朋友，但似乎無法解決這個問題。

我有一個包含名字和球衣顏色等資訊的球員陣列。我要做的就是在特定的 H1 標簽下按球衣顏色對陣列進行排序/分組。

import { Component, VERSION } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  Players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ];
  constructor() {
    this.Players.sort((a, b) => {
      var colorA = a.KitColour.toLowerCase();
      var colorB = b.KitColour.toLowerCase();
      if (colorA < colorB) {
        return -1;
      }
      if (colorA > colorB) {
        return 1;
      }
      return 0;
    });
    const sliceArray = (arr, chunkSize) => {
      const result = [];
      for (let i = 0; i < arr.length; i  = chunkSize) {
        const chunk = arr.slice(i, i   chunkSize);
        result.push(chunk);
      }
      return result;
    };
    sliceArray(this.Players, 2);
    console.log(this.Players);
  }
}

<div class="container" *ngFor="let player of Players">
  <!-- <div  *ngIf="player.KitColour === 'Red'">
    <h1>Red Team</h1>
    <p>{{ player.FirstName }}</p>
  </div>
  <div  *ngIf="player.KitColour === 'Blue'">
    <h1>Blue Team</h1>
    {{ player.FirstName }}
  </div> -->
  <div class="{{ player.KitColour }}">
    <h1>{{ player.KitColour }}</h1>
    <p>{{ player.FirstName }}</p>
</div>

我的輸出：角度排序和拆分和陣列

如何根據套件顏色在單個 H1 標簽下對它們進行一次排序，無論是藍色還是紅色？示例：紅色玩家名稱..

藍色球員名字..

uj5u.com熱心網友回復：

因為您將放在ngFor父 div 中，所以您將擁有與陣列長度一樣多的 h1 元素（每個元素一個）。如果您知道您的顏色，只需在 ngFor 之外提取顏色，然后有條件地（使用ngIf）顯示名稱

uj5u.com熱心網友回復：

只需先將它們分組，有 2 個陣列：

const players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ];
  
const teams = {
    blue: players.filter(player => player.KitColour === 'Blue'),
    red: players.filter(player => player.KitColour === 'Red')
};
    
console.log("Blue team:", teams.blue);
console.log("Red team:", teams.red);

然后有 2 ngFors，并將h1s 放在它外面。

uj5u.com熱心網友回復：

如果您知道不會再添加任何顏色，您可以做的一件事就是將您的陣列分成兩個陣列：每種顏色一個。

完成此操作后，您可以按顏色創建一個 div，并將*ngfor回圈放在 p 標簽內，這樣您就有以下內容：

<div class="container">
  <div class="Red">
    <h1>Red Team</h1>
    <p *ngFor="let redPlayer of RedPlayers">{{ redPlayer.FirstName }}</p>
  </div>
  <div class="Blue">
    <h1>Blue Team</h1>
    <p *ngFor="let bluePlayer of BluePlayers">{{ bluePlayer.FirstName }}
  </div>
</div>

uj5u.com熱心網友回復：

解決這個問題的最佳方法是重做您的物件（或在服務或組件中）。

groupByKitColor = (array: any) => {
    return array.reduce((prev, actual) => {
      prev[actual.KitColour] = prev[actual.KitColour] || [];
      prev[actual.KitColour].push(actual);
      return prev;
    }, Object.create(null));
  };

該解決方案將根據您將來添加的任意數量的顏色對玩家進行分組。然后，只需應用您的 CSS 類。

請參閱附加的 StackBlitz：https ://stackblitz.com/edit/angular-ivy-dyflwe?file=src/app/app.component.html

PS：這里有一些評論，您應該在 OnInit 生命周期中而不是在建構式中進行排序邏輯（按照慣例），并且您的變數應該遵循 camelCase 約定；）

uj5u.com熱心網友回復：

按 KitColour 屬性對陣列進行排序

  Players = [
    {
      FirstName: 'Vader',
      KitColour: 'Blue',
    },
    {
      FirstName: 'Darth',
      KitColour: 'Red',
    },
    {
      FirstName: 'Yeeeeet',
      KitColour: 'Red',
    },
    {
      FirstName: 'New',
      KitColour: 'Blue',
    },
  ].sort((a, b) => a.KitColour.localeCompare(b.KitColour));

并使用這個 html

   <div *ngFor="let player of Players; let index = index">
    <h1 *ngIf="0 === index">{{ player.KitColour }}</h1>
    <h1 *ngIf="0 !== index && player.KitColour! !== Players[index - 1].KitColour">
      {{ player.KitColour }}
    </h1>

    <p>{{ player.FirstName }}</p>
  </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/451158.html

標籤：javascript 数组有角度的打字稿

上一篇：更改按鈕以顯示串列？

下一篇：如何在TypeScript中將物件作為引數傳遞給帶有可選物件欄位的函式？