使用Angular Expression迭代(打印)TypeScript映射

时间:2017-07-19 12:21:31

标签: javascript angular google-maps typescript google-maps-api-3

我希望遍历此地图,以便在地图上显示标记(值对象)并使用id调用操作(键。

我的地图如下所示:

let markerMap: Map<string, GMarker> = new Map<string, GMarker>();

键是id,其中值是GMarker对象:

type GMarker = { long: number, lat: number };

现在我想用Angular表达式迭代这个地图。

我尝试过使用自定义管道的不同方法:

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

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(value, args: string[]): any {
        let keys = [];
        for (let key in value) {
            keys.push({ key: key, value: value[key] });
        }
        return keys;
    }
}

地图正在填充,现在我必须在hmtl中显示它:

<ul>
     <li *ngFor="let m of markerMap | keys"></li>
</ul>

打字稿:

 this.markerMap.forEach((value: GMarker, key: string) => {
            console.log(key, value);
        });
  

595e58eb27362d6b873cf1b7对象{长:4.39751,纬度:52.65264}

     

595e58ec80ea98f3080036fc对象{长:4.39751,纬度:52.65264}

     

595e58ec6814c9194fea9240对象{长:4.39751,纬度:52.65264}

     

595e58ec71693848ee4f2230对象{长:4.39751,纬度:52.65264}

先谢谢。

0 个答案:

没有答案