angular - core.js:6142 ERROR Error: NG0300: Múltiples componentes coinciden con el nodo con el nombre de etiqueta th

Estoy creando algo como una página de detalles maestro en Angular, tengo órdenes de trabajo y cada orden de trabajo tiene tareas (Servicios aplicados), así que en la página de edición de la orden de trabajo estoy intentando listar los Servicios aplicados como un componente hijo. Aquí está mi código AppliedServices.ts:

import { Component, Input, OnInit } from '@angular/core';
import { AppliedServiceDto, AppliedServiceService } from '@proxy/applied-services';
import { WorkorderService } from '@proxy/workorders';

@Component({
  selector: 'app-applied-services',
  templateUrl: './applied-services.component.html',
  styleUrls: ['./applied-services.component.scss']
})
export class AppliedServicesComponent implements OnInit {
  @Input() id: string
  appliedServices:AppliedServiceDto[];
  columns:string[]=["completedTask","employeeName","actions"];
  constructor(private workorderService:WorkorderService) { }

  ngOnInit(): void {
this.workorderService.getFullWorkorderDetailsByWorkorderid(this.id).subscribe((work)=>{this.appliedServices=work.appliedServices});
console.log(this.appliedServices);
    console.log("im child"+this.id);
  }

}

y esto es html:

<mat-card>
    <mat-card-header class="w-100">
      <mat-card-title-group class="w-100">
        <mat-card-title class="abp-card-title"
          >Applied services
          </mat-card-title
        >
        <button
    id="create"
    mat-raised-button
    color="primary"
    type="button"
 
  >
    <i class="fa fa-plus mr-1"></i>
    <span>New Applied service</span>
  
        </button>
      </mat-card-title-group>
    </mat-card-header>
    <mat-card-content>
  
        <table
        mat-table
        [dataSource]="appliedServices"
        class="w-100"
      
      >
        <tr mat-header-row *matHeaderRowDef="columns"></tr>
        <tr mat-row *matRowDef="let myRowData; columns: columns"></tr>
    
        <ng-container matColumnDef="completedTask">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{'::Completed Task' | abpLocalization}}
          </th>
          <td mat-cell *matCellDef="let element">{{element.completedTask}}</td>
        </ng-container>
    
        <ng-container matColumnDef="employeeName">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{'::Customer' | abpLocalization}}</th>
            <td mat-cell *matCellDef="let element"
            prop="element.employeeName"
            >
           {{element.employeeName}}
            </td>
          </ng-container>
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef> {{'::Actions' | abpLocalization}} </th>
          <td mat-cell *matCellDef="let element">
            <button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [matMenuTriggerData]="{id: element.id}">
              <mat-icon>settings</mat-icon>
              {{'::Actions' | abpLocalization}}
              <mat-icon>expand_more</mat-icon>
            </button>
          </td>
      </ng-container>
    
      </table>
     
    </mat-card-content>
  </mat-card>
  
  <mat-menu #menu="matMenu">
    <ng-template matMenuContent let-id="id">
      <button mat-menu-item >
        {{ '::Edit' | abpLocalization }}
      </button>
      <button mat-menu-item >
        {{ '::Delete' | abpLocalization }}
      </button>
    </ng-template>
  </mat-menu>

la tabla no se muestra y tengo este error en la consola: core.js:6142 ERROR Error: NG0300: Varios componentes coinciden con el nodo con el nombre de etiqueta th.

Intenté eliminar el encabezado y funciona correctamente, ¿qué debo hacer para que funcione con el encabezado? Gracias de antemano

Respuesta #1

La razón es usar mat-button y mat-icon-button en el mismo elemento

<button [matMenuTriggerFor]="menu" mat-button mat-icon-button>

Respuesta #2

Necesitas asegurarte de que ViewChild se use para asignar el módulo Sort al mat-table.

Por ejemplo: tsx:

@ViewChild('empTbSort') empTbSort = new MatSort();


 async ngOnInit() {
this.availableDataDataSource.sort = this.empTbSort;
 }

html :

<mat-table class="mat-elevation-z8" mat-table [dataSource]="availableDataDataSource"  (matSortChange)="sortData($event)" matSort #empTbSort="matSort" >

Fuente