Question

现在，我的表的所有逻辑排序都在需要它的每个组件中定义，并且必须在表头中指定。在模块化和易用性方面，我想创建一个可以自己处理所有事情的通用组件。这是我目前的代码：

HTML模板

setOrder(predicate: string) {
    this.sortingOrder = (this.sortingPredicate === predicate)
        ? this.sortingOrder === '-' ? '+' : '-'
        : '+';

    this.sortingPredicate = predicate;
}

setOrderClass(predicate: string) {
    if (this.sortingPredicate !== predicate)
        return 'sorting';

    if (this.sortingOrder === '+')
        return 'sorting_asc';

    return 'sorting_desk';
}

Component.ts

<table description="Résultats de recherche" class="selectable" myTableComponent>
    <thead>
    <tr>
        <th>Id</th>
        <th>Nom</th>
        <th>Crée par</th>
        <th noSorting></th>
    </tr>
    </thead>
    <tbody>
    <tr *ngIf="!documentList || documentList.length == 0">
        <td colspan="3">Aucun résultat trouvé</td>
    </tr>
    <tr *ngFor="let document of (documentList | documentFilter:selectedMetaDataFilter:filter)"
         title="{{ showMetaDatas(document.metaData) }}">
        <td>{{ document.id }}</td>
        <td>{{ document.nom }}</td>
        <td>{{ document.creePar }}</td>
        <td ng-repeat-end class="inline-tools">
           <a href="#">Link</a>
        </td>
    </tr>
    </tbody>
</table>

正如您所看到的，这个冗余代码必须放在任何地方，它会使html和ts变得沉重。我期望的创建将是一个可以放在桌面上的指令，它将为我处理这个逻辑。

<?xml version="1.0" encoding="UTF-8"?>  
<configuration>
<include resource="org/springframework/boot/logging/logback/base.xml"/>
<appender name="DAILY" class="ch.qos.logback.core.rolling.RollingFileAppender">
    <file>/var/log/logs/myLog.log</file>
    <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">

        <!-- minute rollover, for testing only -->
        <fileNamePattern>/var/log/archive/myLog.%d{yyyy-MM-dd-HH-mm}.log</fileNamePattern>  

    </rollingPolicy>
    <encoder>
        <pattern>%d{ABSOLUTE} %5p %c{1}:%L - %m%n</pattern>
    </encoder>
</appender>

<root level="ERROR">
    <appender-ref ref="DAILY" />
</root>  
</configuration>

技术上可行吗？以下是关于该指令必须做什么的想法：

向元素的每一个添加操作
使用过滤器处理排序
在ngFor＆lt; - 我卡住的地方

我很乐意接受任何想法！

创建动态排序表组件

0 个答案: