Ngfor получить имя из одного массива, где id = идентификатор из другого массива и добавить запятую до последнего элемента - PullRequest
Новая
       36

Ngfor получить имя из одного массива, где id = идентификатор из другого массива и добавить запятую до последнего элемента

0 голосов
/ 21 октября 2018 
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 не работает, потому что он считает последний из невидимых и видимых тегов 'span'.

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

Здесь вы можете увидетькак он не удаляет запятую, когда последний видимый интервал не является общим последним интервалом.

PS Извините за возможно запутанный заголовок, это мой первый вопрос StackOverflow!

Ответы [ 2 ]

0 голосов
/ 21 октября 2018 
@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(", ");
  }
}

Создан канал с дополнительными аргументами, в котором я передаю массив идентификаторов и после этого использую его для фильтрации. 

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

Здесь я отобразил содержимое массива.

Спасибо @ talha-junaid

0 голосов
/ 21 октября 2018

Вы можете использовать трубу для преобразования 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>

ПРИМЕЧАНИЕ: ЭтоКод не проверен.Это просто идея того, как выполнить эту задачу.

...