Javascript 角度中的datatable.net无法识别表中的tr

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

（没有问题）：

（问题）：

在2张照片中，您可以看到datatables生成的空行，这意味着datatable无法识别这些行，这意味着datatable选项（如search或pageLength）不起作用。我该怎么办

这是我的表格组件：

• 模板：

{{column}}
{{column}}

• 组成部分：

从'@angular/core'导入{Component，Input，OnChanges，OnInit}；
从“../../data/index”导入{datatableLanguage}”；
@组成部分({
选择器：“应用程序表”，
templateUrl:“./table.component.html”
})
导出类TableComponent实现OnInit、OnChanges{
@输入（）
公共列：数组；
@输入（）
公共类外：字符串；
@输入（）
公共页脚：布尔值；
公共dtOptions：数据表。设置；
构造函数（）{
this.columns=新数组（0）；
this.extraClass=''；
this.footer=true；
this.dtOptions={}；
}
恩戈尼尼特（）{
这是。checkRequiredFields（）；
此.dtOptions={
“语言”：数据表语言，
“响应”：正确
}
}
ngOnChanges（）{
这是。checkRequiredFields（）；
}
checkRequiredFields（）：void{
if（this.columns.length
{{component.name}
{{component.priceByUnit | number}
{{component.amount | number}}

在这个链接@JanithaRasanga中，您是否使用angular datatable？是的，我使用datatables.net和引导响应样式。不要使用datatables.net版本。使用我在上面提到的datatables。因为它是专门为angular配置的。您的情况是这样的，因为datatable在数据绑定到表后不会触发。请检查t他的链接，以获得想法。（为触发表）@JanithaRasanga，我认为是同一个npm包，因为package.json没有改变，但我看到了链接，在示例中，他们在获取数据后使用一个主题来呈现表，但是我的表在另一个组件中，而内容在父组件中，我怎么做呢？我不知道。尝试将这些代码放到一个组件中

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