Angular 2+ içinde ngFor kullanarak Map üzerinde nasıl dolaşılır ve bunlar HTML'de sırayla nasıl gösterilir?

Angular 7.x kullanıyorum.

*ngFor kullanarak Map üzerinde yineleme yapan ve bunları HTML'de görüntüleyen kodu uyguladım.

      <mat-list-item *ngFor="let data of map | keyvalue">
          <div class="col-md-2">
              <p mat-line> {{data.value.name}} </p>           
          </div>            
      </mat-list-item>

Başarıyla bir liste gösteriyor ama sorun şu ki onları sırayla göstermiyor.

Örneğin, eğer A ve B'yi Harita'ya eklersem, şöyle gösterir

A B

Ancak bir tane daha, C eklersem, o zaman şöyle gösteriliyor

A C B

Onun, haritaya eklediğim sırayla olan A B C gibi olmasını istiyorum.

Eğer console.log yaparsam, eklediğim sırayla gösteriyor ama HTML'de değil.

HARİTA kullanmam gerekiyor ama nasıl yapacağımı bilmiyorum.

Lütfen bana yardım edin ve şimdiden teşekkür ederim.

Cevap #1

Map nesnesi anahtar-değer çiftlerini tutar ve anahtarların orijinal eklenme sırasını hatırlar. Herhangi bir değer (hem nesneler hem de ilkel değerler) anahtar veya değer olarak kullanılabilir.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Bir çözüm, aşağıdakileri yapmaktır:

Bu yöntemi TS’nize ekleyin:

asIsOrder(a, b) {
   return 1;
}

HTML dosyanızda keyvalue borusunu keyvalue: asIsOrder olarak değiştirin:

<mat-list-item *ngFor="let data of map | keyvalue: asIsOrder">
    <div class="col-md-2">
        <p mat-line> {{data.value.name}} </p>           
    </div>            
</mat-list-item>

Kaynak: https://github.com/angular/angular/issues/31420

İlgili makaleler