JavaScript Map数据类型值未显示在Angular模板上

qnyhuwrf 于 2023-08-02 发布在 Java

关注(0)|答案(2)|浏览(83)

我试图在Angular模板中查看JavaScript Map类型，即使我使用一些默认值初始化它，值也总是为空。
角分量

export class AppComponent implements OnInit {

  public myJsMap:Map<string,string> = new Map<string,string>([['hello','hello']]);

  ngOnInit(): void {
    this.myJsMap.set('Hello2', 'hellow2')
  }
}

字符串
Angular模板

My Template Value : {{myJsMap | json}}

型
尝试在组件上控制台记录Map值，并在组件端正确打印，但尝试在模板端查看相同值时，始终显示空对象。我们需要在模板端做什么来查看这个值？
结果为空浏览器上的对象：

的数据

JavaScript

来源：https://stackoverflow.com/questions/76739230/javascript-map-datatype-value-not-displaying-on-angular-template

2条答案

按热度按时间

v8wbuo2f1#

您不能对ES6 Map使用Angular json管道。
如果您检查json管道source，您会发现它使用了JSON.stringify()方法，这将导致任何ES6 Map的{}

export class JsonPipe implements PipeTransform {
  transform(value: any): string {
    return JSON.stringify(value, null, 2);
  }
}

字符串
您可以使用NgFor指令和keyvalue管道迭代组件HTML文件中的Map条目，如下所示

<ng-container *ngFor="let entry of myJsMap | keyvalue">
  {{entry.key}} : {{entry.value}}
</ng-container>

型
或建立自己的管道，可以转换它

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'map2json',
})
export class MapToJSONPipe implements PipeTransform {
  transform(map: Map<any, any>): string {
    return JSON.stringify(Array.from(map));  //Or however you want to transform it
  }
}

型
并在组件HTML文件中使用它，如下所示

{{ myJsMap | map2json }}

型

赞(0）回复(0）举报 2023-08-02

ws51t4hk2#

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
})
export class AppComponent {

    myJsMap = new Map<string,string>([['hello','hello']]);

    ngOnInit(): void {
        this.myJsMap.set('Hello2', 'hellow2')
    }

}

<h1>My Map</h1>

<div>{{myJsMap | toJSON}}</div>

字符串

赞(0）回复(0）举报 2023-08-02

我来回答

JavaScript Map数据类型值未显示在Angular模板上

2条答案

相关问题

热门标签

最新问答