在模板- Angular8中迭代接口时出错

Question

我刚开始学8角。

我有一个小组件，它以一个接口作为输入。接口依次由三个字符串字段组成。

我运行了build命令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>

Answer 2

我解决了这个问题，只是让我的自定义接口扩展Map接口。就你而言：

export interface BibliographicCitation extends Map<string, string> {
    key1: string;
    key2: string;
    key3: string;
}