Typescript 如何使用包含键作为字符串和值作为映射迭代的ngFor循环映射进行迭代

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);

  }



}

<ul>
  <li *ngFor="let recipient of map.keys()">
    {{recipient}}
   </li>


</ul>

<div>{{map.size}}</div>

<ul>
    <li *ngFor="let recipient of map | keyvalue">
        {{recipient.key}} --> {{recipient.value}}
    </li>
</ul>

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>

Typescript相关问答推荐

发出与HTML多姆事件重叠的Angular事件

排序更改数组类型

带有联合参数的静态大小数组

如果存在ts—mock—imports，我们是否需要typescpt中的IoC容器

如何在排版中正确键入中间件链和控制器链

将对象属性转换为InstanceType或原样的强类型方法

以Angular 自定义快捷菜单

MatTool提示在角垫工作台中不起作用

`fetcher.load`是否等同于Get Submit？

在打印脚本中使用泛型扩展抽象类

笛卡尔产品类型

(TypeScript)TypeError：无法读取未定义的属性(正在读取映射)"

如何从MAT-FORM-FIELD-MAT-SELECT中移除焦点？

接口中可选嵌套属性的类型判断

编剧- Select 动态下拉选项

在类型脚本中创建显式不安全的私有类成员访问函数

基于属性值的条件类型

如何以类型安全的方式指定键的常量列表，并从该列表派生所挑选的接口？

Typescript泛型调用对象'；s方法

Typescript：是否将联合类型传递给重载函数？