如何将 Angular 2+ 中的地图从 html 模板传递到自定义指令？答案

【问题标题】：How can i pass a Map in angular 2+ from html template to custom directive?如何将 Angular 2+ 中的地图从 html 模板传递到自定义指令？
【发布时间】：2018-12-25 05:01:37
【问题描述】：

我正在尝试将地图从角度 html 模板传递到自定义指令。

我想我成功地将它作为对象传递，因为我可以 console.log 映射值。但是当我尝试从地图中设置或获取值时，我得到一个错误。

我的代码：

html模板

<canvas id="seatsCanvasMain" 
        name="seatsCanvasMain" 
        appTheaterMap [takenSeatsMap]="show.theaterMap" 
        style="border:1px solid black">
</canvas>

指令：

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[appTheaterMap]'
})
export class TheaterMapDirective {
  canvas;
  @Input() takenSeatsMap: any;


  constructor(private el: ElementRef) {
    this.canvas = this.el.nativeElement;
  }

  ngOnInit() {

    this.canvas.onclick = (e) => {
      console.log(this.takenSeatsMap);//this will console log the map as an object. at first it seems that it passed correctly
      this.takenSeatsMap.get('4-4'); // ERROR TypeError: _this.takenSeatsMap.get is not a function

    }

  }

}

这里是console.log

有人知道我能做什么吗？我也很欣赏有关如何将此映射传递给指令的其他方法

非常感谢

【问题讨论】：

请将错误添加到您的帖子中，以便我们更好地帮助您
添加了一张console.log的图片
从外观上看，您根本没有传递 Map 对象。你只是传递一个 JSON 对象。
show.theaterMap 是真实的地图吗？它看起来像一个普通的 json 对象。地图应在控制台中打印如下：Map(1) {2 => "b"}
这是我的 Nodejs 服务器中的地图。我想我提出了另一个问题。是否可以通过 http 请求从服务器端（nodejs）向前端（角度 6）发送地图？

标签： javascript angular angular2-directives angular6 es6-map

【解决方案1】：

Object 对象没有原生 map。

Object.keys(this.map)

将返回一个键数组。

尝试以this.takenSeatsMap.4-4访问

【讨论】：

为什么要初始化输入？使用类型...@Input() takenSeatsMap: Map
查看 @Input() 已采取SeatsMap: Map 是否有效，它会为您提供 'Generic type 'Map' requires 2 type argument(s)'
this.takenSeatsMap.4-4 将导致错误，因为这将访问对象上的数字属性，而不是如果对象键是 '4-4' （应该是字符串，否则它将被评估为0)，因此尝试以 this.takenSeatsMap['4-4'] 的形式访问它，这将产生所需的结果。