Question

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

一旦输入了特定参数，我需要根据所选参数过滤表。

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

如何传递不同的列数据以及如何形成控件？示例：产品表过滤器需要“产品名称”文本框和产品“活动”开关以显示过滤器组件内部。客户表过滤器需要“客户区域”下拉菜单和“客户年龄编号”文本框来显示过滤器组件内部。因此，不同的表需要不同类型的过滤器。在这种情况下，如何设计可重用组件？

Answer 1

您可以制作组件并在需要的地方调用它：）

好吧...好主意

您可以将过滤器类型的作为输入并且您将使输入类型取决于字段类型，例如（如果字符串：textbox，如果布尔值：switch ...等），则可以使用typeof来确定类型。您可以使用如下代码了解类的属性 `export class showClassComponent { var classes = [{名称：'workBookEntity'，值：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上使用某些条件，这取决于您的逻辑。希望对您有帮助

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

1 个答案:

好吧...好主意