angular js ngfor 遍历MAP数据

最新推荐文章于 2021-02-27 15:40:16 发布

lebron3v

最新推荐文章于 2021-02-27 15:40:16 发布

阅读量6.3k

点赞数 1

分类专栏： AngularJS 文章标签： AngularJS

本文链接：https://blog.csdn.net/lebron3v/article/details/94555411

版权

AngularJS 专栏收录该内容

0 篇文章

订阅专栏

angular ngfor 常用用法是遍历集合，如果想要遍历map该如何做呢？这里还是通过ngfor进行遍历，不过需要注意的是需要用个管道。代码如下：

<div class="man_info" *ngFor="let item of addrListDatas | keyvalue">
          <header class="ion-font-weight-medium">
                  <ion-row align-items-center class="no_paddingTop">
                      <ion-col class="no_paddingTop">
                          <strong><span class="blue-block"></span><span style="font-size: 15px">{{item.key}}</span></strong>
                      </ion-col>
                  </ion-row>
          </header>
          <ion-grid *ngFor="let us of item.value">
            <ion-row align-items-center class="no_paddingTop" (click)="toPage('/self/addressDetail', us.uuid)" >
                <ion-col size="2" class="weight">
                  {{us.userName}}
                </ion-col>
                <ion-col class="weight">
                  {{us.mobile}}
                </ion-col>
                <ion-col class="no_paddingTop textRight">
                    &gt;
                </ion-col>
            </ion-row>
          </ion-grid>
        </div>

1. 通过 *ngFor="let item of addrListDatas | keyvalue" 遍历，注意后面的管道是重点 | keyvalue。（angular搜 KeyValuePipe）

2. 通过 item.key 获取key值，通过item.value获取value值。