core.js:6142 ERROR Error: NG0300: Multiple components match node with tagname th

Question

im creating something like master details page in Angular , i have workorders and each workorder has tasks(Applied services) so in the workorder edit page im trying to list the Applied services as child component here is my AppliedServices.ts code:

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);
  }

}

and this is 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>

the table is not shown and i have this error in the console: core.js:6142 ERROR Error: NG0300: Multiple components match node with tagname th.

i tried to delete the header and it works correctly what shall i do to make it works with header thanks in advance

Answer 1

solved by removing mat-sort-header from th tag