如何在角度5中循环循环json数据对象

Question

我要用html绑定我的本地json数据对象一个具有菜单项的matcard菜单中的两个matcard之类的菜单项，例如totalUser是一个具有menuitem的matcard，然后具有Activeuser matcard的菜单项，InActiveUser matCard，但是此json数据未出现仅控制台如何获得那个

report.json:-
{
"groupCode": 0,
"userType": 0,
"totalUsers": {
"totalUser": 33,
"userDetails": {
"activeUsers": 32,
"inActiveUsers": 1,
"lockUsers": 1
 }
},
"totalGroups": {
"totalGroup": 26,
"totalProperties": 22,
"propertyDetails": {
"activeProperties": 22,
"inActiveProperties": 0
 }
},
"status": 0,
"message": null
}

dasbord.ts：

 this.httpService.get('../assets/report.json').subscribe(
      data => {    
      this.arr=data;
      console.log(this.arr);
      }, 
      (err: HttpErrorResponse) => {   
       console.log (err.message);
      } 
   );

dasborad.html：

        <div> 
          <div>Total Users(s)</div> 
          <div>
          {{arr|json}}
          </div>
        </div>
        </div>
        <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon >more_vert</mat-icon>

        </button>
         <mat-menu #menu="matMenu" >
            <div style="width:100%">
                <div class="card border space">
                  <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
                    <div class="name" fxLayout="row">
                    <div>
                      <div>Active Users(s)</div>
                    </div>
                  </div>
                  </div>
                  <div class="content">
                  Hello : 
                  </div>
                </div>
              </div>