当我添加了一些数据而不重新加载页面时，如何重新渲染或重新加载这个子组件表？

如何解决当我添加了一些数据而不重新加载页面时，如何重新渲染或重新加载这个子组件表？

这里我使用 ngx-easy-table 数据表插入。 here is documentation 当我向该表添加新的 data 时，我只想重新渲染或重新加载表组件，但表没有重新渲染我尝试了很多方法但徒劳无功。我还使用了 Nebular UI 集。

这是我的主要组件

<nb-card>
  <nb-card-header>
    <b>Customers</b>
    <button class="btn btn-outline-info float-right btn-sm" (click)="addCustomerModel()">
      <nb-icon icon="person-add-outline" [options]="{ animation: { type: 'shake' } } "></nb-icon>
    </button>
  </nb-card-header>
  <nb-card-body>
    
    <hr>

    <ngx-customer-table></ngx-customer-table>
  </nb-card-body>
</nb-card>

ma​​in component.ts 文件

    @Component({
      selector: 'ngx-customer',templateUrl: './customer.component.html',styleUrls: ['./customer.component.css'],})
    export class CustomerComponent implements OnInit {
    
    
      constructor(private windowService: NbWindowService,private customerService: CustomerService) {
      }
    
      ngOnInit(): void {
        // this.configuringCustomerTable();
      }
    
    
      addCustomerModel() {
        this.windowService.open(NewcustomerComponent,{title: `Window`,closeOnBackdropClick: false});
      }
}

表格组件

<ngx-table [configuration]="configuration"
           [data]="data" #table
           [columns]="columns"
           [noResultsTemplate]="noResultsTemplate"
           (event)="onEvent($event)">

  <ng-template let-row>
    <td>
      <span class="font-small">{{ row.customerID }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.customerCompanyName }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.address }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.mobileNo }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.email }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.fax }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.regNo }}</span>
    </td>
    <td>
      <span class="font-small">{{ row.creditLimit }}</span>
    </td>
    <td>
      <button class="mr-1" nbButton hero status="info" size="tiny" (click)="showModal()">

        <nb-icon icon="edit-2-outline" [options]="{ animation: { type: 'shake' } } "></nb-icon>

      </button>
      <button nbButton hero status="danger" size="tiny"
              (click)="showDeleteModal()">

        <nb-icon icon="trash-2-outline" [options]="{ animation: { type: 'shake' } } "></nb-icon>

      </button>
    </td>

  </ng-template>


</ngx-table>

table component.ts 文件

@Component({
  selector: 'ngx-customer-table',templateUrl: './customer-table.component.html',changeDetection: ChangeDetectionStrategy.OnPush,styleUrls: ['./customer-table.component.css']
})
export class CustomerTableComponent implements OnInit,OnDestroy,OnChanges {

  @ViewChild('table',{static: true}) table: APIDefinition;

  getAllSubscription: Subscription;
  public customerID = 0;

  public columns: Columns[];

  public data;
  public configuration: Config;
  selected;

  config:NbToastrConfig;


  constructor(private customerService: CustomerService,private windowService: NbWindowService,private toasterService :NbToastrService,private changeDetection: ChangeDetectorRef) {
  }

  ngOnInit(): void {
    console.log("ngOnInit IN Customer Table");
    this.configuration = {...DefaultConfig};
    this.columns = [
      {key: 'customerID',title: '#ID'},// {key: 'customerName',title: 'Name'},{key: 'customerCompanyName',title: 'Company'},{key: 'address',title: 'Address'},{key: 'mobileNo',title: 'Mobile'},{key: 'email',title: 'Email'},{key: 'fax',title: 'Fax'},{ key: 'regNo',title: 'Reg' },{key: 'creditLimit',title: 'Credit Limit'},{key: 'actionTpl',title: 'Action'}

    ];
    this.configuration.horizontalScroll = false;
    this.configuration.rows = 100;
    this.configuration.resizeColumn = true;
    this.configuration.paginationRangeEnabled = true;


    // this.configuration.searchEnabled = true;
    // this.configuration.headerEnabled = true;
    // this.configuration.isLoading = true;
    // this.configuration.selectCell = true;
    this.getAllCustomers();
    // this.customerID = this.data.map((_) => _.customerID).reduce((acc,cur) => cur + acc,0);
  }

  // searching table in globally using any keywords
  onChange(name: string): void {
    this.table.apiEvent({
      type: API.onGlobalSearch,value: name,});
  }

  getAllCustomers() {
    this.getAllSubscription = this.customerService.getAllCustomers()
      .subscribe(
        (responce) => {

          this.data = responce;
          console.log("=======");
          console.log(this.data);
          console.log("=======");
          // this.changeDetection.markForCheck();

          // console.log(responce);

        //   for (let customer of Object.values(responce).filter(e => e.customerID)) {
        //
        //   console.log("++++++");
        //     // const buttonName = "12";
        //     // const htmlbutton = '<button type="button">'+buttonName+'</button>';
        //     const tag = document.createElement("button");
        //     // const text = document.create("Turwe");
        //     tag.innerText = "hel";
        //     // tag.appendChild(text);
        //
        //     const element = document.getElementById("new");
        //     const a = element.appendChild(tag);
        //
        //   Object.assign(customer,{actionTpl : a.hidden=true });
        //
        //
        //   // customer.actionTpl = "<h1>hello</h1>";
        //   console.log(customer);
        // }
        },(error) => console.log(error));
  }



  remove(rowIndex: number): void {
    // this.data = [...this.data.filter((_v,k) => k !== rowIndex)];
  }

  ngOnDestroy(): void {
    // Do not forget to unsubscribe the event
    // this.getAllSubscription.unsubscribe();

  }

  onEvent(event: { event: string; value: any }): void {
    this.selected = JSON.stringify(event.value.row,null,2);
    console.log(event);
    // alert(this.selected);


  }

  showModal(): void {
    this.windowService.open(NewcustomerComponent,{title: `New Customer`,closeOnBackdropClick: false});
  }

  showDeleteModal(){
    // console.log(rowNumber);
    const config:{} = {
      status: 'basic',destroyByClick: true,duration: 5000,hasIcon: true,icon:'trash-2-outline',// position: this.position,preventDuplicates: true,};

    this.toasterService.danger("Success","Customer Deleted",config);
  }

  detectedChanges(){
    console.log("detacted changed");
    this.changeDetection.detectChanges();
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log("triggering");
    console.log(changes);
  }

}

提前致谢。