时间戳

首页 > 解决方案 > 如何在 td 标签中使用 ngFor？

angular - 如何在 td 标签中使用 ngFor？

问题描述

我正在使用 ngFor 在 td 中循环，但是对于每个数据，它都会创建新的单元格。如何在一列中显示所有数据，以逗号分隔。

这是我的 html 文件：-

<div>
    <table border="1">
        <tr>
            <th>Actions</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Age</th>
            <th>Salary</th>
            <th>Gender</th>
            <th>Email</th>
            <th>Department</th>
            <th>State</th>
            <th>City</th>
            <th>SkillSet</th>
            <th>Address</th>
        </tr>
        <tr *ngFor = "let employee of employees">
            <td>Edit | Delete</td>
            <td>{{employee.firstName}}</td>
            <td>{{employee.lastName}}</td>
            <td>{{employee.age}}</td>
            <td>{{employee.salary}}</td>
            <td>{{employee.gender}}</td>
            <td>{{employee.email}}</td>
            <td>{{employee.department}}</td>
            <td>{{employee.state}}</td>
            <td>{{employee.city}}</td>
            <ng-container *ngFor="let skill of employee.skills" >
                <td> {{skill.skillName}} </td>
            </ng-container>
            <td>{{employee.address}}</td>
        </tr>
    </table>
</div>

我得到这样的输出：-

SkillSet | Address |          |
---------|---------|----------|------
JAVA     | SQL     | Varanasi |
JAVA     | SQL     | J2EE     | BTM
JAVA     | Ranchi  |          |

我想要这样的输出：-

SkillSet         | Address |
-----------------|---------|
JAVA, SQL        | Varanasi|
JAVA, SQL, J2EE  | BTM     |
JAVA             | Ranchi  |

标签： angular

解决方案

            <ng-container *ngFor="let skill of employee.skills" >

这将有一个<ng-container>（因此，一个td）每个技能。相反，您可以简单地

<td>{{ employee.skills.join(', ') }}</td>

skills（如果是字符串数组，这将起作用。因为它不是......）

有几种方法可以将它们加入一个数组。我反对在标记中加入过多的 JavaScript，但你可以在 TS 中声明一个辅助函数：

getSkillNames = (skills: any): string => skills.map(({ skillName}) => skillName).join(', ');

在模板中只有

<td>{{ getSkillNames(employee.skills) }}</td>

但是请注意，在每次更改检测期间，该函数将针对每一行重新评估，这可能是一个性能问题。我个人会在加载数据时运行一次，如下所示：

this.employeesWithSkillNames = this.employees.map(({skills, ...rest}) => (
    { skillNames: getSkillNames(skills), skills, ...rest })
);

推荐阅读