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

Question

我在 Angular 中创建类似主详细信息页面的内容，我有工作单，每个工作单都有任务（应用服务），所以在工作单编辑页面中，我试图将应用服务列为 child 组件这是我的 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);
  }

}

这是 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>

未显示 table，我在控制台中遇到此错误： core.js:6142 错误错误：NG0300：多个组件与标记名 th 的节点匹配。

我试图删除 header 并且它工作正常我应该怎么做才能让它与 header 一起工作提前致谢

Answer 1

通过从标签

中删除 mat-sort-header 解决

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

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

typescript

angular

mat-table

abp