Render angular2 HashMap

Question

У меня проблема при попытке напечатать HashMap>

На прошлой неделе у меня был вопрос о группировании двух полей с помощью Java 8, который я решил здесь, теперь я не нахожу ничего о том, как печататьответ проекта в angular2.

Ответ, который я получаю, таков:

https://jsoneditoronline.org/?id=de29279e1eaa495188c36169ae9a23ce

С angular2 у меня есть следующий компонент

ngOnInit() {
    this.matchesService.getMatches()
                        .subscribe(
                        data => {
                            this.matches = data;
                        console.log(this.matches["Alemania[EN]"]["ACB[EN]"][0]);
                          },
                      )
  };

Этот компонент правильно печатает ответ в консоли, но я не знаю, как отрисовать.

В html я помещаю это

{{this.matches}} 

, и я печатаю следующий объект

[[object Object]]

Мне нужно правильно отобразить объект.

Answer 1

попробуйте использовать keyvalue pipe:

<p>
    Map looping template side (keyvalue pipe) :
</p>

<ul>
  <li *ngFor="let recipient of map | keyvalue">
    {{recipient.key}} -->
      <span *ngFor="let item of recipient.value | keyvalue">
        {{item.key}}
        <span *ngFor="let element of item.value">
          <ul>
            <li>{{element.id}}</li>
          </ul>
        </span>
      </span>
  </li>
</ul>

DEMO .

Answer 2

Это правильное поведение.

Если совпадения - это список, вы можете использовать * ngFor.Его работа, как цикл, в HTML.Затем вы можете напечатать каждое значение.

Пожалуйста, прочитайте это: https://angular.io/guide/displaying-data#showing-an-array-property-with-ngfor

(Вам не нужно использовать это ключевое слово в html)