对下拉列表进行排序

Question

当用户使用单选按钮选择他想要的排序类型时，我在对下拉列表进行排序时遇到问题。如果他选择上升，则列表将从最低数字到最高数字排序。如果他选择后代，那么这将是从最高到最低的数字。

这是我的代码

<div *ngIf="!estNom" id="choix" class="row">

    <h1 class="col-12"> Les Citoyens </h1>

    <section class="col-12">

        <h2>Sélection Par NAS:</h2>

       

        <select (change)="surSelection($event.target.value)">

            <option selected disabled hidden>Choisissez:</option>

            <option *ngFor="let cito of citoyens" [value]="cito.id">{{cito.id}} : {{cito.nom}}</option>

        </select>

        <button (click)="activerSelectionNom()"> Trier Par Nom </button>

        <section >

            <input type="radio" id="Ascendant" name="radio1" value="Ascen">

            <label for="Ascen">Ascendant</label><br>

            <input type="radio" id="Descendant" name="radio2" value="Descen">

            <label for="Descen">Descendant</label>

        </section>

       

    

    </section>

   

</div>

Answer 1

在radio值改变事件的回调函数中调用该函数。function sortCitoyens(citoyens, isAsc) {&nbsp; &nbsp; if(isAsc){&nbsp; &nbsp; &nbsp; &nbsp; citoyens.sort((a,b)=>a.id-b.id)&nbsp; &nbsp; }else{&nbsp; &nbsp; &nbsp; &nbsp; citoyens.sort((a,b)=>b.id-a.id)&nbsp; &nbsp; }}

Answer 2

有人发布了答案，然后将其删除，但我有时间这样做并且它有效，所以谢谢大家的帮助:)&nbsp;<section class="col-12">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Sélection Par Nom:</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select (change)="surSelection($event.target.value)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" selected disabled hidden>Choisissez:</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option *ngFor="let cito of citoyens.sort()" [value]="cito.id">{{cito.nom}} : {{cito.id}}</option>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button (click)="activerSelectionNAS()"> Trier Par NAS </button>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <section>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" id="asc" name="sort" (click)="sort('asc')"> &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="asc">Ascendant</label><br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" id="desc" name="sort" (click)="sort('desc')" > &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="desc">Descendant</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; </section>sort(type: string) {&nbsp; const sortList = (a: any, b: any) => a.nom.toLowerCase().localeCompare(b.nom.toLowerCase());&nbsp; this.citoyens = type === "asc"&nbsp; &nbsp; ? this.citoyens.sort((a: any, b: any) => sortList(a, b))&nbsp; &nbsp; : this.citoyens.sort((a: any, b: any) => sortList(b, a));}