Mat-selection-list selected first？

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

本质上，您获取点击的项目，将其从其位置移除并将其放在实体数组的开头。

不确定您的列表是否是多选的，但这是快速解决方案 [假设：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

Mat-selection-list selected first？

Mat-selection-list selected coming first?

angular-material

angular