Question

我想显示类似 this 的表格，但当前显示的是错误的类似 this 的表格。

这是我的代码-

这是我的 user.component.html -

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div
    class="col-md-12">

<table cellpadding="9px" cellspacing="9px">
    <thead>
        <tr>
            <th>Jira</th>
            <th>Apllication</th>
            <th>Module</th>
            <th>TestName</th>
            <th>TestDescription</th>
            <th>Projects</th>
            <th>FileChanges</th>
            <th>Impact</th>
            <th>Action</th>

        </tr>
    </thead>

    <!-- <tr *ngFor="let user of users;">
        <td>{{ user.jira }}</td>
        <td>{{ user.application }}</td>

            <td *ngFor="let module of user.module">{{module.module}}</td> 
            <td *ngFor="let module of user.module">{{module.testname}}</td>
            <td *ngFor="let module of user.module">{{module.testdescription}}</td>
            <td *ngFor="let module of user.module">{{module.projects}}</td>
            <td *ngFor="let module of user.module">{{module.filechanges}}</td>
            <td *ngFor="let module of user.module">{{module.impact}}</td>
            <td><button class="btn btn-success fa fa-trash"(click)="deleteUser(user)"></button> </td>
    </tr> -->

    <tr *ngFor="let user of users;">

        <td>{{ user.jira }}</td>
        <td>{{ user.application }}</td>

        <td *ngFor="let module of user.module">{{module.module}}</td>
        <td *ngFor="let module of user.module">{{module.testname}}</td>
        <td *ngFor="let module of user.module">{{module.testdescription}}</td>
        <td *ngFor="let module of user.module">{{module.projects}}</td>
        <td *ngFor="let module of user.module">{{module.filechanges}}</td>
        <td *ngFor="let module of user.module">{{module.impact}}</td>
        <td><button class="btn btn-success fa fa-trash" (click)="deleteUser(user)"></button> </td>
    </tr>

</table>
</div>

这是我的 user.component.ts 文件-

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Model, ModuleClass } from '../models/model.model';
import UserService from './user.service';

@Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
    private users: Model[];

    private user: Model;
    private module: ModuleClass[];

    constructor(private router: Router, private userService: UserService) { }

    ngOnInit() {
        this.userService.getAllUser().subscribe(data => {
            this.users = data;
        })
    }

    deleteUser(user: Model) {
        this.userService.deleteUser(user).subscribe(data => {
            console.log("deleted");
            this.ngOnInit();
        });
    }
}

这是我的JSON数组-

[
    {
        "id": "5c1224a0a8355c43745519da",
        "jira": "Jira1",
        "application": "CMM",
        "module": [
            {
                "module": "Nandi",
                "testname": "a",
                "testdescription": "b",
                "projects": "c",
                "filechanges": "d",
                "impact": "e"
            },
            {
                "module": "Sonu",
                "testname": "z",
                "testdescription": "y",
                "projects": "x",
                "filechanges": "w",
                "impact": "v"
            }
        ]
    }
]

**根据此JSON，我需要在表中显示数据。请向我建议以表格格式显示数据的解决方案。

我是新手。请让我知道是否需要更多片段。

Answer 1

我要做的是利用<ng-container>。看起来像这样：

<ng-container *ngFor="let module of user.module">
  <td *ngFor="property of module | keyvalue">{{property.value}}</td>
</ng-container>

键值已完成以遍历对象。 * .value代表值，*。key可以显示键。

Answer 2

更新表主体，如下所示-

<tbody>
    <ng-container *ngFor="let userObj of users;">
        <tr *ngFor="let user of userObj.module;">
            <td>{{ userObj.jira }}</td>
            <td>{{ userObj.application }}</td>

            <td>{{user.module}}</td>
            <td>{{user.testname}}</td>
            <td>{{user.testdescription}}</td>
            <td>{{user.projects}}</td>
            <td>{{user.filechanges}}</td>
            <td>{{user.impact}}</td>
            <td><button class="btn btn-success fa fa-trash" (click)="deleteUser(user)"></button> </td>
        </tr>
    </ng-container>
</tbody>

Here 是有效的stackblitz链接。

Answer 3

Here是一个有效的选择。

HTML：

<table class="table table bordered">
    <thead>
        <tr>
            <th>Jira</th>
            <th>Apllication</th>
            <th>Modules</th>
            <th>Action</th>
        </tr>
    </thead>

    <tr *ngFor="let user of users;">
        <td>{{ user.jira }}</td>
        <td>{{ user.application }}</td>
        <td>
            <table class="table table bordered">
                <thead>
                    <tr>
                        <th>Module</th>
                        <th>TestName</th>
                        <th>TestDescription</th>
                        <th>Projects</th>
                        <th>FileChanges</th>
                        <th>Impact</th>
                    </tr>
                </thead>
                <tr *ngFor="let module of user.module;">
                    <td>{{module.module}}</td>
                    <td>{{module.testname}}</td>
                    <td>{{module.testdescription}}</td>
                    <td>{{module.projects}}</td>
                    <td>{{module.filechanges}}</td>
                    <td>{{module.impact}}</td>
                </tr>
            </table>
        </td>
        <td><button class="btn btn-success fa fa-trash" (click)="deleteUser(user)"></button> </td>
    </tr>
</table>

JSON（3个用户）

users = [
    {
        "id": "xxxxxxxxxx",
        "jira": "Jira",
        "application": "CMM",
        "module": [
            {
                "module": "Nandi",
                "testname": "a",
                "testdescription": "b",
                "projects": "c",
                "filechanges": "d",
                "impact": "e"
            },
            {
                "module": "Sonu",
                "testname": "z",
                "testdescription": "y",
                "projects": "x",
                "filechanges": "w",
                "impact": "v"
            }
        ]
    },
    {
        "id": "yyyyyyyy",
        "jira": "Jira1",
        "application": "CMM",
        "module": [
            {
                "module": "Nandi",
                "testname": "a",
                "testdescription": "b",
                "projects": "c",
                "filechanges": "d",
                "impact": "e"
            },
            {
                "module": "Sonu",
                "testname": "z",
                "testdescription": "y",
                "projects": "x",
                "filechanges": "w",
                "impact": "v"
            }
        ]
    },
    {
        "id": "zzzzzzzzz",
        "jira": "Jira2",
        "application": "CMM",
        "module": [
            {
                "module": "Nandi",
                "testname": "a",
                "testdescription": "b",
                "projects": "c",
                "filechanges": "d",
                "impact": "e"
            },
            {
                "module": "Sonu",
                "testname": "z",
                "testdescription": "y",
                "projects": "x",
                "filechanges": "w",
                "impact": "v"
            }
        ]
    }
]

在角度5中以动态方式创建的行的显示表

3 个答案: