Angular中的datatable.net无法识别表内的tr

如何解决Angular中的datatable.net无法识别表内的tr

这是我的问题，有时组件会像这样渲染表。

（没问题）：

（问题）：

在两张照片中，您可以看到数据表生成的空行，这意味着数据表无法识别行，这意味着诸如搜索或pageLength之类的数据表选项不起作用。我该怎么办？

这是我的表格组件：

• 模板：

<div class="table-responsive">
    <table datatable [dtOptions]="dtOptions" class="table table-hover" [ngClass]="extraClass" width="100%">
        <thead>
            <tr>
                <th *ngFor="let column of columns">{{ column }}</th>
            </tr>
        </thead>
        <tfoot *ngIf="footer">
            <tr>
                <th *ngFor="let column of columns">{{ column }}</th>
            </tr>
        </tfoot>
        <tbody>
            <ng-content></ng-content>
        </tbody>
    </table>
</div>

• 组件：

import { Component,Input,OnChanges,OnInit } from '@angular/core';

import { datatableLanguage } from "../../data/index";

@Component({
  selector: 'app-table',templateUrl: './table.component.html'
})
export class TableComponent implements OnInit,OnChanges {

  @Input()
  public columns: Array<string>;

  @Input()
  public extraClass: string;

  @Input()
  public footer: boolean;

  public dtOptions: DataTables.Settings;

  constructor() {
    
    this.columns = new Array<string>(0);
    this.extraClass = '';
    this.footer = true;
    this.dtOptions = {};
  }

  ngOnInit() {
    this.checkRequiredFields();
    
    this.dtOptions = {
      "language": datatableLanguage,"responsive": true
    }
  }

  ngOnChanges() {
    this.checkRequiredFields();
  }

  checkRequiredFields(): void {
    if(this.columns.length <= 0)
      throw new Error("Attribute 'columns' is required.");
  }
}

如果需要，可以使用父组件：

• 表格模板部分：

<app-table id="ingredientsTable" [columns]="['Nombre','Precio/Unidad','Cantidad','Acciones']" [footer]="ingredients.length >= 10">
    <tr [class.table-danger]="ingredient.amount <= 0" *ngFor="let ingredient of ingredients">
        <td class="align-middle">{{ ingredient.name }}</td>
        <td class="align-middle text-center">{{ ingredient.priceByUnit | number }}</td>
        <td class="align-middle text-center">{{ ingredient.amount | number }}</td>
        <td>
            <div class="text-center">
                <div class="btn-group">
                    <button class="btn btn-info" (click)="changeModal(ingredient)" data-toggle="modal" data-target="#modalIngredients">
                        <i class="far fa-edit"></i>
                    </button>
                    <button class="btn btn-danger" (click)="deleteIngredient(ingredient)">
                        <i class="far fa-trash-alt"></i>
                    </button>
                </div>
            </div>
        </td>
    </tr>
</app-table>