Problema com MatTableDataSource e services: Type 'Observable<X[]>' is missing the following properties from type 'Observable<X[]>[]': length, pop, push, concat, and 27 more

Programação
#1

Boa tarde Pesquisei muito por esse erro, e a resposta era sempre alguem falando pra declarar a variavel como Observable<Tipo[]>, e isso da certo…
Mas no meu codigo, estou usando o dataSource com um MatTableDataSource, passando a variavel do mesmo jeito, e da esse erro, alguem pode me ajudar com essa relação entre esse erro e o MatTableDataSource?
Segue o código:

veiculo.component.ts

@Component({
  selector: 'app-veiculo',
  templateUrl: './veiculo.component.html',
  styleUrls: ['./veiculo.component.css'],
})
export class VeiculoComponent implements OnInit {
  //veiculos: Observable<Veiculos[]>;
  displayedColumns = [
    'placaOriginal',
    'placaFria',
    'modelo',
    'marca',
    'ano',
    'acoes',
  ];

  dataSource!: MatTableDataSource<Observable<Veiculos[]>>;

  addVeiculo(): void {
    const dialogRef = this.dialog.open(VeiculoDialogComponent, {
      width: '500px',
    });

    dialogRef.afterClosed().subscribe((result) => {});
  }

  @ViewChild('paginator') paginator!: MatPaginator;
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
  }

  constructor(
    private veiculoService: VeiculoService,
    public dialog: MatDialog
  ) {
    //this.veiculos = this.veiculoService.list();
    this.dataSource = new MatTableDataSource(this.veiculoService.list());
  }

  ngOnInit(): void {
  }

veiculo.service.ts

@Injectable({
  providedIn: 'root',
})
export class VeiculoService {
  private readonly API = 'assets/veiculos.json';

  constructor(private httpClient: HttpClient) {}

  list() {
    return this.httpClient.get<Veiculos[]>(this.API);
  }
}
#2

Este erro acontece porque o constructor da MatTableDataSource não aceita um Observable, mas um um array, Fora isso, vc só precisa ajustar os tipos.

Aqui está minha sugestão de correção (removi várias partes do código, deixei só a que interessa para facilitar a leitura).

export class VeiculoComponent {
  dataSource!: MatTableDataSource<Veiculos>;

  constructor(private veiculoService: VeiculoService) {
    this.veiculoService.list().subscribe((veiculos) => {
      this.dataSource = new MatTableDataSource(veiculos);
    });
  }
}

Basicamente basta vc se inscrever no Observable “manualmente” e passar o resultado para o MatTableDataSource.

#3

Isso deu certo com a questão do MatTableDataSource, obrigado.
Mas gerou outro erro:

Types of property 'filteredData' are incompatible.
    Type 'Veiculos[]' is not assignable to type 'Observable<Veiculos>[]'.
      Type 'Veiculos' is not assignable to type 'Observable<Veiculos>'.
#4

Mostra o código onde tem o filteredData.

#5

deu certo, tinha me esquecido de arrumar a declaração do dataSource… valeu cara, tava nesse bug ha um bom tempo já

1 curtida