Ngfor 从一个数组中获取名称，其中 id = 来自另一个数组的 id 并添加一个逗号直到最后一个元素答案

【问题标题】：Ngfor get the name from one array where the id = the id from another array and add a comma till the last elementNgfor 从一个数组中获取名称，其中 id = 来自另一个数组的 id 并添加一个逗号直到最后一个元素
【发布时间】：2018-10-21 14:50:31
【问题描述】：

export class Task implements ITask {
  id:number;
  name:string;
  employees:number[];
}

export class Employee implements IEmployee {
  id: number;
  department_id: number;
  first_name: string;
  last_name: string;
  birth_date: string;
}

apiEmployees:Employee[];
apiTasks:Task[];
//task of apiTasks

我想显示某个任务的员工的员工姓名。我设法做到了，但问题是它没有删除最后一个逗号，我不知道如何解决这个问题：

<span *ngFor="let employee of apiEmployees let isLastTaskEmployee=last">
            <span *ngIf="task.employees.includes(employee.id) ">
              {{employee.first_name}}
              {{employee.last_name}}
              {{isLastTaskEmployee
                ?'' : ', '}}
            </span>
          </span>

我想要一种不同的方法，因为这会创建很多隐藏的“跨度”标签，并且 isLastTask 不起作用，因为它会计算最后一个不可见和可见的“跨度”标签。

https://i.stack.imgur.com/V71vd.png

在这里您可以看到当最后一个可见跨度不是整个最后一个跨度时它如何不删除逗号。

附：请原谅我的标题可能令人困惑，这是我的第一个 StackOverflow 问题！

【问题讨论】：

也许带有 ngfor 的过滤器？但是我该怎么做呢？
你能显示isLastTaskEmployee的代码吗
isLastTaskEmployee没有代码，我都展示了，只在ngFor中使用，isLastTaskEmployee是ngfor数组的最后一个元素。它可以工作，但我有空的跨度，由于 ngIF 而没有显示，但它们仍然计入最后一个元素，所以最后一个元素有时是一个不可见的元素，因此它不会删除逗号。

标签： angular string formatting ngfor angular-ng-if

【解决方案1】：

您可以使用管道转换apiEmployees。

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({name: 'employeelistPipe'})
export class EmployeeListPipe implements PipeTransform {
    transform(employees: IEmployee []): string {
        names: string[] = [];
        employees.forEach(employee => {
            names.push(`${employee.first_name} ${employee.last_name}`)
        });
        return names.join(", ")

    }
}

然后，您可以将此管道用作

<span>{{apiEmployees | employeelistPipe}}</span>

注意：此代码未经测试。只是想知道如何完成这项任务。

【讨论】：

谢谢你，用你的例子我研究了多个管道并完成了它！

【解决方案2】：

@Pipe({ name: "employeelistPipe" })
export class EmployeeListPipe implements PipeTransform {
  transform(employees: Employee[], employee_ids: number[]): string {
    var names: string[] = [];
    employees.forEach(employee => {
      if (employee_ids.includes(employee.id))
        names.push(`${employee.first_name} ${employee.last_name}`);
    });
    return names.join(", ");
  }
}

创建了一个带有附加参数的管道，我在其中传递了 id 数组，然后我用它来过滤它。

<span>{{apiEmployees | employeelistPipe:task.employees}}</span>

这里我已经显示了数组的内容。

谢谢@talha-junaid

【讨论】：