Mat-selection-list 选择首先出现？

Question

如果我有一个填充了 mat-list-option 的 mat-selection-list，我可以以某种方式将选定的值放在列表的顶部吗？

                       <mat-selection-list formControlName="mySubEntityIds">
                          <mat-list-option [value]="entity.id" *ngFor="let entity of entities" checkboxPosition="before">
                             {{entity.name}}
                          </mat-list-option>
                       </mat-selection-list>

Answer 1

本质上，您将单击的项目从 position 中删除，并将其放在实体数组的开头。

不确定您的列表是否是多选的，但这是快速解决方案 [假设：id 是唯一的]：

<mat-selection-list>
  <mat-list-option
    [value]="entity.id"
    *ngFor="let entity of entities"
    checkboxPosition="before"
    (click)="onSelected(entity.id)">
    {{ entity.name }}
  </mat-list-option>
</mat-selection-list>

在 ts 中：

onSelected(id){
    let removedItem;
    let removedIndex;
    this.entities.every( (element,i) => {
        if(element.id == id){
            removedItem = element;
            removedIndex = i;
            return false;
        }
        return true;
    });
    this.entities.splice(removedIndex,1);
    this.entities.unshift(removedItem);
}

Stackblitz 示例： https://stackblitz.com/edit/mat-selection-list-8zbx1j