时间戳

首页 > 解决方案 > Angular 材质表兄弟刷新

angular - Angular 材质表兄弟刷新

问题描述

我不知道如何从兄弟组件刷新表。我的仪表板 HTML 包含组件。我执行一个操作，需要从对话框中单击来刷新角度材料表。我正在使用提供的默认 MatTableDataSource 但this.table.renderRows()仅适用于父子关系。显示的代码显示了父级的布局。在浮动动作按钮内部，它们是几个组件，它们都是用于不同动作的不同模式。可以选择桌子上的项目并执行操作。我手动删除了结果数组（从表中选择的行），但是数据在控制台中被删除并且没有在表上刷新

我提供了结构的更新

The file below is called a dashboard.html file

<app-table></app-table>

<floating-action-button></floating-action-button>

在我的应用程序表组件中是 Mat Table。在浮动操作中，我使用 const dialogRef = this.dialog.open(ActionComponent1, { width: '500px', height: '500px', 在浮动操作按钮 .ts 文件中还有 3 个其他对话框组件，在从对话框中按下 OK 后框，表格应该被刷新。我很困惑如何从包含@Component ActionComponent1的floating-action-button.ts中的动作组件1发出信号来刷新表格（我在这里将其称为动作一作为示例。我按对话框上的确定，运行一个函数以从表中删除行，并且需要刷新表，但我似乎不知道如何从 Action 1 组件内部一路向 table.renderRows() 发出信号它位于浮动操作 button.ts 内。

标签： angularangular-materialangular-material2siblings

解决方案

如果您将组件的引用作为输入传递，您可以创建一个 table.renderRows()

<app-table #apptable></app-table>

<floating-action-button [apptable]="apptable"></floating-action-button>

里面

@ViewChild(MatTable) table

内部浮动操作按钮

@Input("apptable") apptable
click()
{
    this.apptable.table.renderRows()
}

推荐阅读