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

Question

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>

我想要一种不同的方法，因为这会创建很多隐藏的 'span' 标签，并且 isLastTask 不起作用，因为它计算 non-visible 和可见的 'span' 中的最后一个] 标签。

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

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

P.S。请原谅我的标题可能令人困惑，这是我的第一个 Whosebug 问题！

Answer 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>

注意：此代码未经测试。这只是为了了解如何完成这项任务。

Answer 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

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 element

string

formatting

angular-ng-if

ngfor

angular