【问题标题】:Angular with Angular Material - MatTable(s) with multiple MatTab(s)Angular with Angular Material - 具有多个 MatTab(s) 的 MatTable(s)
【发布时间】:2018-10-17 23:01:40
【问题描述】:

新手问题。我有一个 Angular Component,它使用表格在多个选项卡上显示由特定字段分隔的数据。

假设数据模型是:

company {
   type: "...",
   country: "...",
   name: "..."
}

数据在多个选项卡上由type分隔。
也可以过滤这些数据,该过滤器应该会影响每个选项卡中显示的数据。
这是一个糟糕的模型。

实现此目的的最佳方法是什么?
每个标签的新表太多了吗?我应该只创建一个表并刷新每个选项卡更改上显示的数据(+) 过滤器更新吗?

【问题讨论】:

    标签: angular angular-material


    【解决方案1】:

    通过材质选项卡的工作方式,它们为每个选项卡设计了一个独特的内容主体容器,以便内容可以在选项卡更改时转换。

    • 很遗憾,我认为您别无选择,只能为每个选项卡生成一个 mat-table。
    • 我可能是错的,可能有一种我不熟悉的方法,在这种情况下,我将删除此答案。

    【讨论】:

    • 也许标签应该只是@Output() 更改事件。使用该事件,我可以更新 MatTable 的唯一实例。因此,MatTab(s) 将没有内容,它们只是为了发出包含类型 ID 的“更改”事件。
    • 听起来您基本上会将 MatTable 放在 MatTabs 内容主体的范围之外,而不是物理上位于 MatTab 的主体中。如果我理解正确,您基本上会将 MatTab 用作美化的事件发射器……这是可行的……但在我看来,这违背了使用 MatTab 组件的目的。在这种情况下,我会亲自探索提出我自己的 html 选项卡解决方案,以完全控制我的页面内容,同时避免自定义 MatTab 组件的预期用途的任何问题。 w3schools.com/howto/howto_js_tabs.asp
    • 自定义解决方案可能更好,更轻量。我可能会使用 Bootstrap Material 选项卡并在每个选项卡上处理 click 事件。但即使使用此解决方案,MatTable 也会在选项卡之外。我误解了你的评论吗?
    • 不,我认为您的理解是正确的。我提供的示例链接的不同之处在于,您基本上不需要使用 html 中的选项卡内容片段,您可以只使用选项卡来触发您的事件,这将更新您页面中的内容正文/MatTable...在此示例中,您基本上没有选项卡内容主体,只有包含一个 MatTable 的页面内容主体。
    • 我认为这是可行的。我将等待其他答案,因为也许它可以以更有效的方式解决。谢谢;)
    猜你喜欢
    • 2022-11-11
    • 1970-01-01
    • 2016-01-22
    • 1970-01-01
    • 1970-01-01
    • 2015-05-04
    • 2022-11-01
    • 1970-01-01
    • 2018-05-13
    相关资源
    最近更新 更多