Question

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

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>

...在localhost上正常工作。但是，当我进行生产生产时，出现以下错误：

src / app / [...]中的错误：'likertObj'类型的参数不可分配到“地图”类型的参数。类型“ likertObj”为缺少“地图”类型的以下属性：清除，删除，forEach，get和另外8个。

当类 LikertValues 的对象 points 未实现我的LikertObj接口时，即当我更改代码时，不会发生此错误

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

到

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

我尝试过的事情：

通过Interface Object扩展我的Interface likertObj，这会导致相同的错误
通过Interface Map扩展了我的Interface likertObj，这导致智能感知告诉我对象指向类 LikertValues

缺少类型'likertObj'的以下属性：清除，删除，forEach，get和另外8个。ts（2740）

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

（我不想向这个问题发送太多代码，因此我避免在此处添加我的构建配置，否则，如果可以回答这个问题，我将编辑这篇文章。）

Answer 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}) || {}

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

1 个答案: