Jquery 为什么角度数据表不呈现？

我不熟悉角度数据表。 如果数据表以前是隐藏的，如何重新呈现它

我有两个组件，父组件和子组件都通过基于标志的按钮单击来隐藏和显示

期望值： 如果通过子组件添加了新行，我需要重新呈现该表。（代码不是为添加新行而编写的，而是应用了发射器。）请提供帮助

问题： 从子组件添加新行时，将显示所有行，而不会呈现DataTable

父HTML

    <div [hidden]="!showlist">
    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>id</th>
                <th>title</th>
                <th>completed</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let user of todo">
                <td> {{t.id}} </td>
                <td> {{t.title}} </td>
                <td> {{t.completed}} </td>
            </tr>
        </tbody>
    </table>
    <br/>

    <div class="btn-group btn-group-justified">
        <a class="btn btn-default">
            <button class="btn btn-default" (click)="showChild()">ShowChild</button>
        </a>
    </div>
</div>


<hr>
<div *ngIf="!showlist">
    <app-child (back)="showParent()" (rowAdded)="todo()">
    </app-child>
</div>

<button class="btn btn-default" (click)="addRow()">Add row</button> &nbsp;
<button class="btn btn-default" (click)="showParent()">ShowParent</button>

身份证件
标题
完整的
{{t.id}
{{t.title}}
{{t.completed}}


问题似乎在于变量名称。它们是一样的


todo:stackblitz上的数组

编辑

修复命名问题后

todo（）{
this.showlist=true；
this.dtTrigger=新主题（）；
这个.dtTrigger.subscribe（）；
this.http.get。每次调用带有
dtTrigger
subject的emit新值时。此调用名为
this.displayTable（）；

dtTrigger注释

如果要手动触发DT渲染，则使用此触发器


在渲染角度渲染DOM时非常有用

如果你在收到数据后取消订阅，请离开表格

这里有一个关于闪电战的消息

编辑2

呈现表似乎有问题。它已重写所有表和触发器

接下来，我将删除数据表的实例并重新创建一个新的实例

可能的

很抱歉，您的示例也不起作用！单击子组件上的addrow按钮时，Datatable将丢失其原始形式。所有行都显示出来。是的，您是对的。我已更新了我的答案。非常感谢您的努力，但仍然存在相同的问题。如果单击addrow按钮（在您的工作示例中），所有行都将可见（与初始加载时一样，只有10行具有分页的行可见），表丢失了其原始格式..即未正确呈现..请帮助我很抱歉，我已再次测试。请再次检查工作示例。并编辑2
<button class="btn btn-default" (click)="addRow()">Add row</button> &nbsp;
<button class="btn btn-default" (click)="showParent()">ShowParent</button>

  export class ChildComponent implements OnInit {
  @Output() rowAdded: EventEmitter<any> = new EventEmitter<any>();
  @Output() back: EventEmitter<any> = new EventEmitter<any>();

  constructor() {}

  ngOnInit() {}

  addRow() {
    //code to add new row
    this.rowAdded.emit();
  }
  showParent() {
    this.back.emit();
  }
}