• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

142
Vistas
Angular Displaying a Table with a Condition

In my code, I have a JSON list which I fetch a data using fromFetch(). I can get the data and group it on the console by categoryId. I want to display a table of products only with the categoryId of 2. Right now, I can only display a uniform table without the condition I want. What should I do to achieve what I want?

HTML:

<div>
  <table
    mat-table
    [dataSource]="items$ | async"
    class="mat-elevation-z8"
    matSort
  >
    <ng-container matColumnDef="categoryId">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Category Id</th>
      <td mat-cell *matCellDef="let item">{{ item.categoryId }}</td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
      <td mat-cell *matCellDef="let item">{{ item.name }}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

TS:

items$: Observable<Item[]>;
  dataSource: MatTableDataSource<Item>;

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  displayedColumns: string[] = ['categoryId', 'name'];

  ngAfterViewInit(): void {
    this.items$ = fromFetch(
      'someitems/data/items.json'
    ).pipe(
      switchMap((response) => {
        return response.json();
      })
    );

    this.items$.subscribe(function (result) {
      const grouped = _.groupBy(result, (res) => res.categoryId);
      this.dataSource = result;
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      console.log(grouped);
    });
  }
almost 3 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

You can extend current items$ observable, to perform further operation using another map operator. Apply your object transformation logic in map function.

Update

On the template side you had to add a separate row for groupBy row, right? You can use the when clause on another mat-row. Inside when clause you can add isGroup function, that helps to verify whether to show the groupBy row or not.

Template

<tr mat-row 
  *matRowDef="let row; columns: ['initial']; when: isGroup"
></tr>

TS

isGroup(index, item): boolean {
  return item.isGroupBy;
}

this.items$ = fromFetch(
  'someitems/data/items.json'
).pipe(
  switchMap((response) => {
    return response.json();
  }),
  map((data) => {
    const grouped = groupBy(data, (res) => res.categoryId);
    let output = [];
    for (let group in grouped) {
      output.push({ initial: group, isGroupBy: true });
      output = output.concat(grouped[group]);
    }
    return output;
  })
);

Stackblitz

almost 3 years ago · Santiago Trujillo Denunciar

0

You can use function as data source argument

<table mat-table [dataSource]="fetch(2) | async" class="mat-elevation-z8" matSort>

and the function will look something like:

fetch(catId): MatTableDataSource<Item>{
  const data = this.items$.filter(row => row.categoryId === catId);
  const ds = new MatTableDataSource<Item>(data);
  ds.paginator = this.paginator;
  ds.sort = this.sort;

  return ds;
}
almost 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda