在 Angular 9 及更高版本中推送列表顶部的复选框的选中/选中项答案

【问题标题】：Push the checked/selected item of checkbox at the top of the list in Angular9 and above在 Angular 9 及更高版本中推送列表顶部的复选框的选中/选中项
【发布时间】：2021-11-04 03:03:16
【问题描述】：

我正在尝试获取列表顶部的选中复选框如果我说选中五个复选框中的第四个复选框（12345）结果应该是 (41235) 请帮忙参考一下我已经添加了工作到目前为止完成并添加链接。

TS 文件

import { Component } from '@angular/core';

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

    export class AppComponent {
      options = ['1', '2', '3', '4', '5', '6'];
      selected = [];
    
      messages = [];
    
      // check if the item are selected
      checked(item) {
        if (this.selected.indexOf(item) != -1) {
          return true;
        }
      }
    
      // when checkbox change, add/remove the item from the array
      onChange(checked, item) {
        if (checked) {
          this.selected.push(item);
        } else {
          this.selected.splice(this.selected.indexOf(item), -1);
        }
        console.log(this.selected);
      }
    
      save() {
        this.messages.push(this.selected.sort());
      }
    }

*** HTML 文件 ***

<h1>Angular Checkbox List</h1>

<h3>Options</h3>
{{options | json}}
<h3>Selected</h3>
{{selected | json}}
<br>
<h3>List</h3>
<div *ngFor="let item of options">
  <input type="checkbox"
  (change)="onChange($event.target.checked, item)"
  [checked]="checked(item)"
>
  {{item}}
</div>
<br>
{{selected.length}} items selected <br>
<button (click)="save()">Save</button>

<h3 *ngIf="messages.length != 0">Log</h3>
<div *ngFor="let item of messages">
  save: {{item}}
</div>

给定列表

[] one (say I selected first this checkbox)
[] two 
[] three (second this checkbox)
[] four
[] five (next this checkbox)

例外结果

[]five
[]three
[]one
[]two
[]four

working here stackblitz

【问题讨论】：

标签： html angular typescript checkbox angular9

【解决方案1】：

更新： 在onChange方法中添加这两行

this.options.splice(this.options.indexOf(item), 1);
this.options.unshift(item);

注意： Stackblitz 链接已更新。

旧：只需从this.messages.push(this.selected.sort()); 行中删除.sort() 方法即可。它将按照您选择它们的顺序给出精确选择的项目。

我已在您的 Stackblitz 链接中对其进行了修改-https://stackblitz.com/edit/angular-wmimex

【讨论】：

我需要重新排序列表如果我选择了五个复选框中的第四个复选框（12345），结果应该是（41235）意味着4个复选框应该在列表中排名第一
工作示例在这里，但我需要 Angular 9+ 版本jsfiddle.net/L37fha9m

【解决方案2】：

将索引添加到 HTML 文件中的 *ngFor。

    <div *ngFor="let i = index; let item of options">
      <input type="checkbox"
       (change)="onChange($event.target.checked, item, i)"
       [checked]="checked(item)">
      {{item}}
    </div>

因此您可以将其用作onChange 函数中的参数。这样您就可以从该索引中删除并将其推到顶部，如下所示：

  // when checkbox change, add/remove the item from the array
  onChange(checked, item, index) {
    if (checked) {
      // Removes it from the index
      this.options.splice(index, 1);
      // Push it in the first position
      this.options.unshift(item);

      this.selected.push(item);
    } else {
      this.selected.splice(this.selected.indexOf(item), 1);
    }
    console.log(this.selected);
  }

Here I modified your Stackbliz code.

Snapshot of the result

如果您希望项目在取消选择时返回其原始索引：

  // when checkbox change, add/remove the item from the array
  onChange(checked, item, index) {
    if (checked) {
      // Removes it from the index
      this.options.splice(index, 1);
      // Push it in the first position
      this.options.unshift(item);
      this.selected.push(item);
    } else {
      // Removes it from the index
      this.options.splice(index, 1);
      // Place it in the original index
      this.options.splice(this.optionsCopy.indexOf(item), 0, item);
      this.selected.splice(this.selected.indexOf(item), 1);
    }
    console.log(this.selected);
  }

Here the working Stackblitz.

【讨论】：