Отфильтруйте данный массив в угловых 4 без использования другого массива и отобразите его в том же компоненте

Question

У меня есть множество студентов с их именами и результатами.

studentResults = [
{name: 'Adam', result : 'Passed'},
{name: 'Alan', result : 'Failed'},
{name : 'Sandy', result : 'Passed'}, 
{name: 'Max', result : 'Passed'},
{name : 'Woody', result : 'Failed'}];

Я хочу отобразить в компоненте список студентов, сдавших экзамены слева, и тех, кто провалил экзамен справа.Как я буду фильтровать массив и отображать записи, не используя другой массив?

Answer 1

вы можете создать одну filter трубу и использовать ее в шаблоне, например, так:

@Pipe({
  name: 'filterByResult'
})
export class FilterByResultPipe implements PipeTransform {
  transform(value: number, result: 'Passed' | 'Failed', args?: any): any {
    return value.filter(student => student.result === result);
  }
}

в шаблоне

<div *ngFor="let student of studentResults | filterByResult: 'Passed'">
        {{student.name}}
<div>

<div *ngFor="let student of studentResults | filterByResult: 'Failed'">
        {{student.name}}
<div>

Answer 2

Вы можете создать два метода для вашего компонента:

getPassedResults(): object[] {
  return this.studentResults.filter((r) => r.result === 'Passed');
}

getFailedResults(): object[] {
  return this.studentResults.filter((r) => r.result === 'Failed');
}

Затем создайте переменные, которые вы можете использовать шаблон:

const passedResults = this.getPassedResults();
const failedResults = this.getFailedResults();

Затем в вашем шаблоне просто циклически перебирать их, как обычно:

<ul>
  <li *ngFor="let result of passedResults">
  ...
  </li>
</ul>

Редактировать: Обновлено, чтобы убрать использование вызовов методов.

Answer 3

вы можете использовать каналы для того же массива в вашем представлении и передать ему ключ, который вы хотите отфильтровать.Я сделал для вас пример в stackblitz для вашего случая:https://stackblitz.com/edit/angular-array-pipes?file=src%2Fapp%2Fapp.component.html

Обновлено:Вот фрагмент кода для трубы:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(data: any, key: string, value: string): any {
    if(!data || data.length === 0) {
      return [];
    }

    return data.filter(item => item[key].toLowerCase().includes(value.toLocaleLowerCase()));

  }
}

• Вы можете использовать его в своем представлении так:

  <div class="container">
  <div class="row">
  <div class="col">
  <ul class="list-group">
   <li class="list-group-item" *ngFor="let user of users | filter:'result':'Failed'">{{ user.name }}</li>
  </ul>
  </div>
  
      <div class="col">
    <ul class="list-group">
              <li class="list-group-item" *ngFor="let user of users | filter:'result': 'Passed'">{{ user.name }}</li>
          </ul>
  </div>
  </div>
  

Answer 4

Вы можете использовать ngIf внутри цикла ngFor:

<div *ngFor="let student of studentResults">
    <ng-container *ngIf="student.result == 'Passed'">
        {{student.name}}
    </ng-container>
<div>

И сделать то же самое для неудачного div с правой стороны