Angular 10 - table error

Question

I am making a table and using json-server as backend at angular 10. The table does not show the data and the console points an error in the tag. I can’t figure out the mistake, someone can help me?

html

<div class="mat-elevation-z4">
  <table mat-table [dataSource]="products">
    <!-- Id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
      <td mat-cell *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Nome</th>
      <td mat-cell *matCellDef="let row">{{row.name}}</td>
    </ng-container>
    <!-- Price Column -->
    <ng-container matColumnDef="price">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Preço</th>
      <td mat-cell *matCellDef="let row">{{row.price}}</td>
    </ng-container>
    <!-- Acquisition Column -->
    <ng-container matColumnDef="acquisition">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Aquisição</th>
      <td mat-cell *matCellDef="let row">{{row.acquisition}}</td>
    </ng-container>
    <!-- Condition Column -->
    <ng-container matColumnDef="condition">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Condição</th>
      <td mat-cell *matCellDef="let row">{{row.condition}}</td>
    </ng-container>
    <!-- Brand Column -->
    <ng-container matColumnDef="Brand">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Marca</th>
      <td mat-cell *matCellDef="let row">{{row.Brand}}</td>
    </ng-container>
    <!-- Discount Column -->
    <ng-container matColumnDef="discount">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Desconto</th>
      <td mat-cell *matCellDef="let row">{{row.discount}}</td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

</div>

Typescript

import { Component, OnInit } from '@angular/core';
import {Product} from "../product.model";
import {ProductService} from "../product.service";

@Component({
  selector: 'app-procuct-read',
  templateUrl: './procuct-read.component.html',
  styleUrls: ['./procuct-read.component.css']
})
export class ProductReadComponent implements OnInit {

  products:Product[]
  displayedColumns = ['id', 'name', 'price','acquisition',
    'condition','Brand', 'discount']

  constructor(private productService:ProductService) { }

  ngOnInit(): void {
    this.productService.read().subscribe(products =>{
      this.products = products
      console.log(products)
    })
  }

}

Answer 1

Are two things:

1. It lacked instantiation the product, try:

product: Product[] = []

2. To use the mat-sort-header you need to add the module MatSortModule and put it on exports, in accordance with material documentation.

import {MatSortModule} from '@angular/material/sort';