时间戳

首页 > 解决方案 > 如何在angular8中将对象数组循环为单独的表

html - 如何在angular8中将对象数组循环为单独的表

问题描述

我正在使用 Angular8，这里我有一组对象作为单独的角色，其中包含一个用户列表。现在我需要在单独的表格中显示这些角色。所以我需要调用相同的代码 7 次，因为有 7 个带有标题的角色。与其调用相同的代码 7 次，不如将其与角色名称一起作为标题进行循环，如果该特定角色没有数据，如何隐藏？

HTML：

 <div class="mb-3" *ngIf="contactsList?.length !=0">
    <h6>Personal Lines Marketing</h6> 
    <table class="table table-hover accordion-table" id="accordionContact">
        <thead>
            <tr>
                <th scope="col" *ngFor="let field of contactListDetails" (click)="sortContactsList(field.param)">
                    {{field.displayName}}
                    <i class="{{field.icon}}" aria-hidden="true"></i>
                </th>
                <th scope="col" class="width125"></th>
            </tr>
        </thead>
        <tbody>
                <tr *ngFor="let contact of contactsList.plMarketing | paginate: config ;let i = index">
                    <td *ngFor="let field of contactListDetails" class="{{field.class}}" (click)="editContact(contact,contact.contactId)">
                        {{contact[field.param]}}
                    </td>
                    <td class="width125 {{paginationDisable?'link-disabled':''}}" ><button class="btn btn-outline-primary btn-table" title="Send Mail"
                            (click)="userDisplay(contact)"  [disabled]="isReadOnly && mode ==1"><i class="far fa-envelope"></i></button>
                        </td>
                </tr>
        </tbody>
    </table>
</div>

TS：

contactsList = [{
        "version": null,
        "statusCode": 200,
        "message": "Success",
        "isError": false,
        "result": {
            "plMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "new@gmail.com"
                }          
            ],
            "clMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "new@gmail.com"
                }
            ],
            "plUnderWrite": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "sahdh@gmail.com"
                }
            ],
            "clUnderWrite": [
                {
                    "userId": 19,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ],
            "plCorrespond": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ],
            "clCorrespond": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "sahdh@gmail.com"
                }
            ],
            "accounting": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ],
            "management": [
                {
                    "userId": 16,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ]
        }
    }]

所以这里, plMarketing, clmarketing,plunderwriting都是不同的角色，所有的角色都包含相同的参数名称。

请帮助我在不添加额外 7 次相同代码的情况下循环。

演示： 演示

标签： htmlangular

解决方案

组件.html

 <div *ngIf="contactsList?.length !=0">
    <div class="mb-3" *ngFor="let key of keys;let i = index">
        <h6 style="font-weight: 600;">{{key | titlecase}}</h6>
        <table class="table table-hover accordion-table" id="accordionContact">
            <thead>
                <tr>
                    <th scope="col" *ngFor="let field of contactListDetails" (click)="sortContactsList(field.param)">
                        {{field.displayName}}
                        <i class="{{field.icon}}" aria-hidden="true"></i>
                    </th>
                    <th scope="col" class="width125"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>{{contactsDetails[0].result[key][0]?.userName}}</td>
                    <td>{{contactsDetails[0].result[key][0]?.faxNumber}}</td>
                    <td>{{contactsDetails[0].result[key][0]?.email}}</td>
                    <td>{{contactsDetails[0].result[key][0]?.phoneNumber}}</td>
                    <td class="width125 {{paginationDisable?'link-disabled':''}}"><button class="btn btn-outline-primary btn-table" title="Send Mail"
                            (click)="userDisplay(contactsDetails[0].result[key][0])"  [disabled]="isReadOnly && mode ==1">Email</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

组件.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  contactsList:any =[]
   public contactListDetails = [
    { param: 'userName', displayName: 'User Name', icon: 'fas fa-sort ', class:"textInputUpperCase" },
    { param: 'faxNumber', displayName: 'Fax Number', icon: 'fas fa-sort ',class:"textInputUpperCase" },
    { param: 'email', displayName: 'Email',icon: 'fas fa-sort ',class:"textInputUpperCase"  },
    { param: 'phoneNumber', displayName: 'PhoneNumber' },
  ];

  keys = []; //declared array to get all keys from result key
  public contactsDetails = [{
        "version": null,
        "statusCode": 200,
        "message": "Success",
        "isError": false,
        "result": {
            "plMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "new@gmail.com"
                }          
            ],
            "clMarketing": [
                {
                    "userId": 2,
                    "agentCode": 3343,
                    "userName": "New,New",
                    "phoneNumber": "123",
                    "faxNumber": "123",
                    "email": "new@gmail.com"
                }
            ],
            "plUnderWrite": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "sahdh@gmail.com"
                }
            ],
            "clUnderWrite": [
                {
                    "userId": 19,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ],
            "plCorrespond": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ],
            "clCorrespond": [
                {
                    "userId": 15,
                    "agentCode": 3343,
                    "userName": "ghghgh,hghgh",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "sahdh@gmail.com"
                }
            ],
            "accounting": [
                {
                    "userId": 18,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ],
            "management": [
                {
                    "userId": 16,
                    "agentCode": 3343,
                    "userName": "hghg,fse",
                    "phoneNumber": null,
                    "faxNumber": null,
                    "email": "hgh@gmail.com"
                }
            ]
        }
    }]
    ngOnInit(){
      this.contactsList = this.contactsDetails[0].result;
      this.keys = Object.keys(this.contactsDetails[0].result); // getting all keys of result object
    }
}

推荐阅读