如何使用ngFor循环进行迭代Map包含键作为字符串,值作为映射迭代 [英] How to iterate using ngFor loop Map containing key as string and values as map iteration
本文介绍了如何使用ngFor循环进行迭代Map包含键作为字符串,值作为映射迭代的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我对angular 5并不陌生,并尝试迭代包含打字稿中另一张地图的地图. 如何在角度下迭代这种地图 以下是组件的代码:
I am new to angular 5 and trying to iterate the map containing another map in typescript. How to iterate below this kind of map in angular below is code for component:
import { Component, OnInit} from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
map = new Map<String, Map<String,String>>();
map1 = new Map<String, String>();
constructor() {
}
ngOnInit() {
this.map1.set("sss","sss");
this.map1.set("aaa","sss");
this.map1.set("sass","sss");
this.map1.set("xxx","sss");
this.map1.set("ss","sss");
this.map1.forEach((value: string, key: string) => {
console.log(key, value);
});
this.map.set("yoyoy",this.map1);
}
}
及其模板html是:
<ul>
<li *ngFor="let recipient of map.keys()">
{{recipient}}
</li>
</ul>
<div>{{map.size}}</div>
推荐答案
对于Angular 6.1 + ,您可以使用默认管道 进行检查并也要投票 ):
For Angular 6.1+ , you can use default pipe keyvalue
( Do review and upvote also ) :
<ul>
<li *ngFor="let recipient of map | keyvalue">
{{recipient.key}} --> {{recipient.value}}
</li>
</ul>
WORKING DEMO
对于以前的版本:
一个简单的解决方案是将地图转换为数组: Array.from
One simple solution to this is convert map to array : Array.from
组件侧:
map = new Map<String, String>();
constructor(){
this.map.set("sss","sss");
this.map.set("aaa","sss");
this.map.set("sass","sss");
this.map.set("xxx","sss");
this.map.set("ss","sss");
this.map.forEach((value: string, key: string) => {
console.log(key, value);
});
}
getKeys(map){
return Array.from(map.keys());
}
模板端:
<ul>
<li *ngFor="let recipient of getKeys(map)">
{{recipient}}
</li>
</ul>
WORKING DEMO
这篇关于如何使用ngFor循环进行迭代Map包含键作为字符串,值作为映射迭代的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文