Angular 角度：检测父零部件数据更改

我有一个调用数据服务的父组件。 在此组件中，我定义了我的列：

tableInterventionsColumns: TableColumn<Interventions>[] = [

    {
      label: 'Date',
      property: 'dateIntervention',
      type: 'text'
    },
    {
      label: 'Type',
      property: 'TypeIntervention',
      type: 'text',
      cssClasses: ['font-medium']
    },
    {
      label: 'Comments',
      property: 'RemarqueIntervention',
      type: 'text',
      cssClasses: ['text-secondary']
    }
    ,
    {
      label: 'Technician',
      property: 'InstallateurIntervention',
      type: 'text',
      cssClasses: ['text-secondary']
    }
    ,
    {
      label: 'Device',
      property: 'typeBoitierIntervention',
      type: 'text',
      cssClasses: ['text-secondary']
    }
  ];

我可以在控制台中看到2阵列

我在传递数据的模板中调用我的子组件

<vex-widget-table-interventions [columns]="tableInterventionsColumns"
                    [data]="tableInterventionsData"
                    class="w-full overflow-auto shadow" gdColumn="3 / -1"
                    gdColumn.lt-md="1 / -1"
                    gdColumn.lt-sm="1"></vex-widget-table-interventions>

我有一个子组件，它必须通过检索2个数组来创建datatable

import { AfterViewInit, Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import icMoreHoriz from '@iconify/icons-ic/twotone-more-horiz';
import icCloudDownload from '@iconify/icons-ic/twotone-cloud-download';
import { TableColumn } from '../../../interfaces/table-column.interface';

@Component({
  selector: 'vex-widget-table-interventions',
  templateUrl: './widget-table-interventions.component.html'
})
export class WidgetTableInterventionsComponent<T> implements OnInit, OnChanges, AfterViewInit {

  @Input() data: T[];
  @Input() columns: TableColumn<T>[];
  @Input() pageSize = 6;

  visibleColumns: Array<keyof T | string>;
  dataSource = new MatTableDataSource<T>();

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  icMoreHoriz = icMoreHoriz;
  icCloudDownload = icCloudDownload;

  constructor() { }

  ngOnInit() {
    console.log(this.data);
    console.log(this.columns);
    
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.columns) {
      this.visibleColumns = this.columns.map(column => column.property);
    }

    if (changes.data) {
      this.dataSource.data = this.data;
      console.log(this.dataSource);
    }
  }

import{AfterViewInit，Component，Input，OnChanges，OnInit，SimpleChanges，ViewChild}来自“@angular/core”；
从“@angular/material/table”导入{MatTableDataSource}；
从'@angular/material/paginator'导入{MatPaginator}；
从'@angular/material/sort'导入{MatSort}；
从“@iconify/icons-ic/twoone-more-horiz”导入icMoreHoriz；
从“@iconify/icons ic/twotone cloud download”导入icCloudDownload；
从“../../../interfaces/table column.interface”导入{TableColumn}；
@组成部分({
选择器：“vex小部件表干预”，
templateUrl:“./widget表干预.component.html”
})
导出类WidgetTableInterventionsComponent实现OnInit、OnChanges和AfterViewInit{
@输入（）数据：T[]；
@Input（）列：TableColumn[]；
@Input（）pageSize=6；
可见列：数组；
dataSource=新MatTableDataSource（）；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
@ViewChild（MatSort，{static:true}）sort:MatSort；
icMoreHoriz=icMoreHoriz；
icCloudDownload=icCloudDownload；
构造函数（）{}
恩戈尼尼特（）{
console.log（this.data）；
console.log（this.columns）；
}
ngOnChanges（更改：SimpleChanges）：无效{
if（changes.columns）{
this.visibleColumns=this.columns.map（column=>column.property）；
}
如果（更改.数据）{
this.dataSource.data=this.data；
console.log（this.dataSource）；
}
}

问题是它很好地检索列，但没有数据

你有没有办法帮助初学者学习英语？

---

提前感谢

不建议为此目的使用ngOnChanges。如您所知，其目的是使用当前值和以前的值。 因此，在您的代码中：

this.dataSource.data = this.data.currentValue

我建议传递一个可观察的数据，而不是数组数据

从父组件开始：

this.tableInterventionsData = this.TankDetailsService.getInterventions(this.idCit)

然后在子组件WidgetTableInterferencesComponent中：

@Input() data: Observable<T[]>;

ngOnInit() {
    this.data.subscribe(data => this.dataSource.data = data)
}

@Input（）数据：可观察；
恩戈尼尼特（）{
this.data.subscribe（data=>this.dataSource.data=data）
}

非常感谢您的回复。有了您的建议，一切都正常了！谢谢！

@Input() data: Observable<T[]>;

ngOnInit() {
    this.data.subscribe(data => this.dataSource.data = data)
}