Question

让我通过说我对Angular还不是很陌生，这是我对材料表的初次体验。我有一个位于一个组件中的材料表。我有一个驻留在另一个组件中的数据获取例程。基于在第二个组件中所做的选择，我需要更新物料表中的数据。我不确定如何去做，所有的实验都失败了。我试图在这个论坛上寻找解决类似情况的问题，但到目前为止尚未成功。

我试图直接并通过发射器来绑定物料表的打字稿文件变量，但是我唯一看到的数据是第二种形式（计算数据的形式）的ngInit。此后，当更新数据时（请参见下面的performButtonClickAction（）），我看到该数据已在发射器中正确填充，但未显示在表中。我想我需要知道如何在材料表组件中触发更新/刷新事件。

获取数据的组件：

<div>    
    <div >
        <div >
                <div > 
                    <button (click)="performButtonClickAction('ManualReview')">  </button>
                </div>
                <div >
                    <button (click)="performButtonClickAction('PendingCustomer')"></button>
                </div>
                <div >
                    <button (click)="performButtonClickAction('DecisionRendered')"></button>
                </div>
                <div >
                    <button (click)="performButtonClickAction('RefreshComplete')"></button>
                </div>
                <div >
                    <button (click)="performButtonClickAction('AllMyDeals')"> </button>
                </div>
        </div>

        <div >
            <op-credit-view-body-table [data]="refreshDetails" ></op-credit-view-body-table>
        </div>
    </div>
</div>

在op-credit-view-body-table上方的html中[data] =“ refreshDetails” 是对物料表组件的引用。

Typescript文件方法，在进行某些选择时会获取数据：

@Output() updatedRecords = new EventEmitter<RefreshDetailRecords[]>();

performButtonClickAction(value: string) {
      this.currentRefreshSelected = RefreshType[value];

      if (this.currentRefreshSelected == 4)
        this.refreshDetails =  this.fundationService.getRefreshedRecords();
      else
        this.refreshDetails =  this.refreshDetails.filter(x => x.currentStatusId == this.currentRefreshSelected);

      this.updatedRecords.emit(this.refreshDetails);
  }

材料表打字稿文件：

@Input（）数据：RefreshDetailRecords []; <-这是在上面显示的html代码段中设置的

ngOnInit() {

    this.dataSource = new CreditViewBodyTableDataSource();
    this.dataSource.data = this.data;
  }

我正在寻找的结果是，当第二个表单执行performButtonClickAction（）操作，并且refreshDetailRecords []对象已更新时，我需要以某种方式将该消息传递回物料表组件并进行更新桌子。

当前路线如下：

数据获取组件的ts文件使用ngInit（）方法初始化数据对象refreshDetailRecords []。

数据获取表单使用其自己的html初始化材料表“ data”对象，如下所示：

材料数据源数据驻留在材料组件的ts文件中

Answer 1

在@Input中创建“获取器”，请参见docs

@Input()
  set data(value:any[]) {
    this._data=value; //really if not use "data" you can remove this line
    this.dataSource = new CreditViewBodyTableDataSource();
    this.dataSource.data = value;
  }

  //really if not use "data" you can remove this line
  get data(): any[]{ return this._data; } 
}

Answer 2

使用此：-

@Input()
  set data(value:any[]) {
    this.dataSource = value;
    const d = JSON.stingify(this.dataSource);
    this.dataSource = JSON.parse(d);
  }

无法通过单独的组件更新物料表上的数据

2 个答案: