Ошибка при переборе интерфейса в шаблоне - Angular8

Question

Я новичок в Angular 8.
У меня есть небольшой компонент, который принимает интерфейс в качестве ввода. Интерфейс, в свою очередь, состоит из трех строковых полей.
Я выполнил команду построения npm run build:gh-pages, которая сообщает о следующей ошибке:

ERROR in src/app/components/bibliography/bibliography-item/bibliography-item.component.html(1,4): Argument of type 'BibliographicCitation' is not assignable to parameter of type 'Map<unknown, unknown>'.
  Type 'BibliographicCitation' is missing the following properties from type 'Map<unknown, unknown>': clear, delete, forEach, get, and 8 more.

Это мой компонент .ts файл:

import { Component, Input } from '@angular/core';
import { BibliographicCitation } from 'src/app/services/xml-parsers/bibliography-parser.service';

@Component({
  selector: 'evt-bibliography-item',
  templateUrl: './bibliography-item.component.html',
  styleUrls: ['./bibliography-item.component.scss']
})

export class BibliographyItemComponent {
  @Input() biblField: BibliographicCitation;
}

И это мой компонент .html файл:

<p *ngFor="let biblEl of biblField | keyvalue">
  <em class="biblCitation">
    {{ biblEl.value }}
  </em>
</p>

РЕДАКТИРОВАТЬ:
каждый biblField вывод:

Надеюсь, ничего серьезного.

Answer 1

Используйте массив, Люк!

import { Component, Input, OnInit } from '@angular/core';
import { BibliographicCitation } from 'src/app/services/xml-parsers/bibliography-parser.service';

export class BibliographyItemComponent implements OnInit {
  @Input() biblField: BibliographicCitation;

  templateBiblCitData;

  ngOnInit() {
    this.templateBiblCitData = Object.values(this.biblField);
  }
}

<p>
  <em *ngFor="let biblEl of templateBiblCitData" class="biblCitation">
    {{ biblEl }}
  </em>
</p>