Как перебрать карту с помощью ngFor и отобразить их по порядку на html в Angular 2+? - PullRequest
Новая
       13

Как перебрать карту с помощью ngFor и отобразить их по порядку на html в Angular 2+?

0 голосов
/ 14 января 2019

Я использую Angular 7.x.

Я реализовал код, в котором используется * ngFor, он перебирает карту и отображает их в формате html 

      <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>

Он успешно показывает список, но проблема в том, что он не показывает их по порядку.

Например, если я добавлю A и B на карту, она отобразится как

A B

Однако, если я добавлю еще один, C, то он будет отображаться как

A С B

Я хочу, чтобы это было как A B C, это порядок, который я вставил в Map.

Если я console.log, то он показывает, как в порядке я вставил, но не в HTML.

Я ДОЛЖЕН использовать MAP, но не знаю как.

Пожалуйста, помогите мне и заранее спасибо.

1 Ответ

0 голосов
/ 14 января 2019

Если вы установите такие значения, 

export class AppComponent  {

  map = new Map<String, String>();

  constructor(){
   this.map.set("sss","sss");
   this.map.set("aaa","sss");
   this.map.set("sass","sss");
   this.map.set("xxx","sss");
   this.map.set("ss","sss");
   this.map.forEach((key: string,value: string) => {
   console.log(key, value);
});
}
}

отобразит список следующим образом.

ааа -> ссс

sass -> sss

сс -> ссс

sss -> sss

xxx -> sss

Это означает, что порядок списка зависит от вашего ключа.

  • Если ключи являются числами, они сортируются в порядке возрастания.
  • Если ключи являются строками, они сортируются в алфавитном порядке.
  • Если ключи смешаны, т. Е. Один ключ является строкой, а другой - цифрой затем оба преобразуются в строки, сначала отсортированные по номерам в порядке возрастания, а затем отсортированные по строкам в алфавитном порядке.

  • Если ключ не определен или равен нулю, они отображаются в конце.

    Попробуйте по этой ссылке. https://stackblitz.com/edit/angular-map-keyvalue?file=src%2Fapp%2Fapp.component.ts

...