Question

我是Angular的新手，需要帮助。实际上，我的任务是如何在单击{{client_management.name}}时获取该JSON数据并显示该数据。

它应该显示客户端名称，联系电话，emailid（div）标签的JSON数据。

我在下面提到我的JSON，请检查一下。

       HTML
       ----

        <tbody>
            <tr *ngFor="let client_management of dashboard_data?.account_mangement?.account_info?.account;let i=index">
                <td>{{i+1}}</td>
                <td>{{client_management.name}}</td>
                <td>
                </td>
            </tr>
        </tbody>
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="form-group">
                <label class="client-label">Client Name: Client1</label>
            </div>
            <div class="form-group">
                <label class="client-label">Contact Person: Suresh</label>
            </div>
            <div class="form-group">
                <label class="client-label">Contact Number: +91-9841252253 </label>
            </div>
            <div class="form-group">
                <label class="client-label">Email ID: techsureshp@gmail.com </label>
            </div>
        </div>

    TS
    ---
      getManageDashboardDetails(){
        this.loaderService.display(true);

       const headers = new Headers({
       'Authorization': localStorage.getItem('Token'),
       'Content-Type': 'application/json'
      });
      const options = new RequestOptions({
       headers: headers
      });
         this.service.get(options, services.dashboard_service).subscribe((response) => {
         if (response.status === 200) {
             this.dashboard_data = response.json().dashboard_details;
             this.loaderService.display(false);
            }

          });
      }
JSON
-----
        "account_mangement": {
            "inactive_count": 0,
            "activate_request": 1,
            "account_info": {
                "account": [
                    {
                        "request": "vinodkumar",
                        "name": "vinodkumar",
                        "status": "active",
                        "info": {
                            "password": "xxx",
                            "address": "Chennai",
                            "additional_info": {
                                "date_time": "Fri Jun 22 13:26:40 IST 2018"
                            },
                            "name": "vinodkumar",
                            "mobile": "+919444999360",
                            "last_name": "R",
                            "designation": "Developer",
                            "org_name": "Volumata Analytics",
                            "first_name": "Vinodkumar",
                            "email": "vinodkumar.r@volumataanalytics.com"
                        }
                    },
                    {
                        "request": "sureshpillai",
                        "name": "sureshpillai",
                        "status": "active",
                        "info": {
                            "password": "yyyy",
                            "address": "Chennai",
                            "additional_info": {
                                "date_time": "Fri Jun 22 13:26:40 IST 2018"
                            },
                            "name": "sureshpillai",
                            "mobile": "+919044999360",
                            "last_name": "R",
                            "designation": "Developer",
                            "org_name": "Volumata Analytics",
                            "first_name": "sureshpillai",
                            "email": "sureshpillai.r@volumataanalytics.com"
                        }
                    }

                ]
            }
        }

Answer 1

您需要添加click事件以获取在此基础上选择了哪个用户，您需要获取此类详细信息-

<tbody>
    <tr *ngFor="let client_management of dashboard_data?.account_mangement?.account_info?.account;let i=index" (click)='getDetails(client_management.name)'>
        <td>{{i+1}}</td>
        <td>{{client_management.name}}</td>
        <td>
        </td>
    </tr>
</tbody>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="form-group">
        <label class="client-label">Client Name: {{selectedUser?.name}}</label>
    </div>
    <div class="form-group">
        <label class="client-label">Contact Person: {{selectedUser?.name}}</label>
    </div>
    <div class="form-group">
        <label class="client-label">Contact Number: {{selectedUser?.info?.mobile}} </label>
    </div>
    <div class="form-group">
        <label class="client-label">Email ID: {{selectedUser?.info?.email}} </label>
    </div>
</div>

selectedUser = {};
getDetails(name) {
    let myJson = this.dashboard_data.account_mangement.account_info.account;

    myJson.map(obj => {
        if(obj.name == name) {
            this.selectedUser = obj;
        }
    })
}

Answer 2

您可以尝试此解决方案

component.ts

client:any;

component.html

<tbody>
    <tr *ngFor="let client_management of dashboard_data?.account_mangement?.account_info?.account;let i=index">
        <td>{{i+1}}</td>
        <td (click)="client=client_management">{{client_management.name}}</td>
        <td>
        </td>
    </tr>
</tbody>


<div *ngIf="client" class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
    <div class="form-group">
        <label class="client-label">{{client?.info?.name}}</label>
    </div>
    <div class="form-group">
        <label class="client-label">{{client?.info?.email}}</label>
    </div>
    <div class="form-group">
        <label class="client-label">{{client?.info?.mobile}} </label>
    </div>
    <div class="form-group">
        <label class="client-label">{{client?.info?.org_name}}</label>
    </div>
</div>

Answer 3

请按照以下步骤操作：-

1）您可以创建两个div，并通过使用一些布尔变量，可以在两个div上使用结构化指令* ngIf。

2）在ngOninit生命周期挂钩上，使用angular的任何数据绑定概念将数据提供给div，并且仅显示第一个div。

3）当您单击客户端名称时，应更新布尔变量的值，这样将显示第二个div。由于第二个div中的HTML已绑定到数据，因此数据将已经存在。

4）您可以将类或Onclick事件添加到包含客户端名称的HTML元素中。在您的情况下，这是td。而您用于更新布尔变量值的整个逻辑将被写在这里。

 <div> <span (click)="showDetails()">Client Name</span> </div>
 <div *ngIf="showClientdetails">
  <span>Client details </span>
 </div>

// Component.ts
  showDetails() {
    this.showClientdetails= true;
}

当我使用Angular2中的onclick函数单击特定用户时如何动态显示JSON数据

3 个答案: