如何将 *ngFor 与实现自定义接口的对象一起使用答案

【问题标题】：How to use *ngFor with an Object implementing a custom Interface如何将 *ngFor 与实现自定义接口的对象一起使用
【发布时间】：2019-11-04 00:19:20
【问题描述】：

所以我在一个类中有一个对象，它实现了一个接口

interface likertObj {
    1: string | number,
    2: string | number,
    3: string | number,
    4: string | number,
    5: string | number
}

export class LikertValues {
    points: likertObj = {
        1: 'positiveStrong',
        2: 'positive',
        3: 'neutral',
        4: 'negative',
        5: 'negativeStrong'
    }
}

在我的组件中，我创建了一个此类的实例...

  likertValues = new LikertValues();

...并尝试在我的组件模板中循环其属性...

<ul>
    <li *ngFor="let likertPoint of likertValues.points | keyvalue">
        {{likertPoint.value}}
    </li>
</ul>

...在本地主机上运行良好。但是，当我为生产构建时，出现以下错误：

src/app/[...] 中的错误：“likertObj”类型的参数不可分配到“地图”类型的参数。类型“likertObj”是缺少“地图”类型的以下属性： clear、delete、forEach、get 等等 8 个。

当类 LikertValues 的对象 points 没有实现我的接口 LikertObj 时，不会出现此错误，这意味着当我更改我的代码时

export class LikertValues {
    points: likertObj = {
        1: 'positiveStrong',
        ...

到

export class LikertValues {
    points = {
        1: 'positiveStrong',
        ...

我的尝试：

通过接口对象扩展我的接口likertObj，导致同样的错误
通过接口映射扩展我的接口 likertObj，这导致智能感知告诉我对象 points 类 LikertValues

缺少类型“likertObj”的以下属性：清除， delete、forEach、get 和另外 8 个.ts(2740)

现在我认为必须有一个更简单的解决方案，让对象既实现自定义接口又可迭代。

（我不想在这个问题中添加太多代码，所以我不会在此处添加我的构建配置，如果与能够回答这个问题相关，我将编辑这篇文章。）

【问题讨论】：

标签： angular typescript interface iterator

【解决方案1】：

问题来自于角管keyvalue。这是source code。

如您所见，管道需要：{[key: string]: V}|Map<string, V>。对象或地图。

所以最简单的解决方案是转换好的类型。

*ngFor="let likertPoint of points | keyvalue"

与：

get points(): {[key: string]: string} {
   return this.likertValues.points as {[key: string]: string} || {}
}

如果仍有问题，请尝试：

return (this.likertValues.points as unknow as {[key: string]: string}) || {}

【讨论】：