Angular：检测父组件数据变化

Question

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

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']
    }
  ];

我还从放入数组的数据服务中获取数据：

tableInterventionsData: Interventions[];

.........

this.TankDetailsService.getInterventions(this.idCit).subscribe((Interventions: Interventions[]) => {
      
      this.tableInterventionsData = Interventions;

    });

我可以在控制台中看到 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 个数组来创建数据表。

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);
    }
  }

问题是它可以很好地检索列但没有数据。

您有帮助 Angular 初学者的想法吗？提前谢谢你

Answer 1

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

this.dataSource.data = this.data.currentValue

我建议传递一个 Observable 而不是数组数据。

从父组件开始：

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

然后在子组件WidgetTableInterventionsComponent中：

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

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

Angular：检测父组件数据变化

Angular: detect parent component data changes

typescript

angular-datatables

angular