Question

我正在尝试创建一个地图结构，以使用来自不同来源的信息动态填充它：

export class VideoDataMap {
    [videoId: string]: {
        url: string,
        name: string
    };
}

问题在于，当我将数据分配给对象属性时，它表示该对象未定义。如果我分配一个字符串而不是对象，它就可以了。谁知道我在这里失踪了什么？

  public videoDataMap = new VideoDataMap();

这不会引发错误（但我们没有使用对象属性）

  this.videoDataMap[videoId] = url;

这会抛出错误

   this.videoDataMap[videoId].url = url;  

   error: TypeError: Cannot set property 'url' of undefined

非常感谢你最好的问候

Answer 1

如何'回合

if (this.videoDataMap[videoId]) // check if there's an object
    this.videoDataMap[videoId]["url"] = url; // only assign this field
else // is unassigned
    this.videoDataMap[videoId] = {url : url}; // initialize new object

Answer 2

我认为混淆是因为你已经定义了一个带有结构的Typescript类，而不是真正的字段。也就是说，在构造之后，你将获得一个Javascript空对象，这完全有意义，因为最初它是一个没有设置键的地图。

很容易看到查看已编译的代码（例如使用http://www.typescriptlang.org/play/）

打字稿：

var VideoDataMap = (function () {
    function VideoDataMap() {
    }
    return VideoDataMap;
}());
exports.VideoDataMap = VideoDataMap;

生成的Javascript：

let videoDataMap = new VideoDataMap();

这意味着，当你这样做时：

var videoDataMap = {}

你会得到类似的东西：

videoDataMap["myVideoId1"].anyProp

因此，当您执行TypeError时，您将获得videoDataMap["myVideoId1"]，因为class VideoDataItem{ public url: string; public name: string; constructor(u: string, n: string){ this.url = u; this.name = n; } } class VideoDataMap { [videoId: string]: VideoDataItem; }尚未初始化。

另一种方法是将其定义为：

config.js

并使用它，如下面的运行示例：https://glot.io/snippets/ervh3vtbg9

我希望它有所帮助。

在Typescript和angular 4中的对象的动态地图

2 个答案: