Início / coding / Perguntas / 79480658
Accepted
LeO
Asked: 2025-03-03 17:44:21 +0800 CST

Angular 17: Classificar tabela de materiais com fonte de dados de sinal

  • 772

Tenho como datasourceem uma tabela de materiais um sinal.

  dataSource: WritableSignal<PeriodicElement[]> = signal([]);

Os dados da tabela são exibidos corretamente

Acrescento de acordo com a descrição no matSortcabeçalho.

<table mat-table matSort [dataSource]="dataSource()" class="mat-elevation-z8">
<!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>No.</th>
...

Mas de alguma forma isso não funciona. Eu vi e tentei sem Signals e isso funcionou. Alguma ideia de como usar corretamente com Signals?

Pilha Blitz

angular

1 respostas

  1. Best Answer

    Você precisa converter seu sinal para matTAbledatasource e então funcionará bem.

    assim de acordo com seu código. por exemplo.

    ngOnInit() {
    // Synchronize Signal data with MatTableDataSource
    effect(() => {
      this.dataSource.data = this.dataSourceSignal();
    });
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }


    import { Component, Signal, WritableSignal, signal, effect, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatSort } from '@angular/material/sort';

interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;
}

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements OnInit {
  dataSourceSignal: WritableSignal<PeriodicElement[]> = signal([
    { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
    { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' }
  ]);

  dataSource = new MatTableDataSource<PeriodicElement>();

  @ViewChild(MatSort) sort!: MatSort;

  ngOnInit() {
    // Synchronize Signal data with MatTableDataSource
    effect(() => {
      this.dataSource.data = this.dataSourceSignal();
    });
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }
}

    também preciso atualizar o modelo

    <table mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="position">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>No.</th>
    <td mat-cell *matCellDef="let element">{{ element.position }}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['position']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['position'];"></tr>
</table>
    • 1

relate perguntas