多个表的自定义过滤器组件 - Angular

Question

我有多个表格，这些表格是根据来自我网站中不同 API 的数据填充的。对于所有表格，我想创建一个过滤器组件，其中包含相应的表格列名称和相应的过滤条件（开关、复选框、下拉菜单、文本框、日期范围、输入范围），然后单击应用。

输入特定参数后，我需要根据所选参数过滤表格。

我有 5 个表，其中包含不同的列数据（产品、客户、风险、错误、信号）。如何为所有表制作通用过滤器组件？代码逻辑在哪里写？

如何传递不同的列数据以及如何形成控件？示例：产品表过滤器需要产品名称文本框和产品活动开关以显示在过滤器组件内部。客户表过滤器需要客户区域下拉列表和客户年龄数字文本框才能显示在过滤器组件中。因此，不同的表需要不同类型的过滤器。在这种情况下如何构建一个可重用的组件？

Answer 1

你可以制作一个组件并在你想要的地方调用它:)

好的...好主意

您可以将过滤器类型作为输入 并且您将使输入类型依赖于字段类型，例如（如果字符串：文本框，如果布尔值：switch ...等），您可以使用typeof 来确定类型。 你可以使用这样的代码知道类的属性 `导出类 showClassComponent { var classes = [ { name: 'workBookEntity', value: new WorkBookEntity() }]

whenSubmitedInHtmlForm(className: string): void {
    let c = classes.filter(class => class.name == className)[0];
    if(c) {
        let ret = [];

        for (var key in c) {
            if (c.hasOwnProperty(key)) {
                ret.push({ name: key, value: c[key] });
            }
        }

        return ret;
    }
}

// more code there

}`

您将在 Typescript 和 HTML 上使用一些条件，这取决于您的逻辑。 希望能帮到你