突出显示匹配模式的路径(角度7)

时间:2018-11-19 09:44:04

标签: angular angular-material angular7 mat-table

我有一个路径列表,其中可以包含通配符。筛选/突出显示与包含通配符的路径匹配的路径的最佳方法是什么?这样,当您还拥有路径“ /server/*”f.ex时,将标记路径“ / server / test / block”。到目前为止,我已经尝试将.filter与.contains嵌套,并检查数组是否大于1。但是,这只会给出完全匹配的结果,而且我没有找到将相同的类添加到彼此匹配的类的好方法

要运行该功能,我在Mat-cell上测试了[innerHTML]选择器,但该功能已运行很多次。我还在mat-cell内的跨度上使用[class.someName] -selector进行了测试,但这也会多次调用该函数。任何关于我应该寻找方向的指针将不胜感激。

使用物料表显示数据。

1 个答案:

答案 0 :(得分:0)

我最终向数据集“ matchesPattern”添加了一个布尔值。我发现了一个npm module named minimatch,它根据模式匹配是否给出布尔值。

import minimatch from 'minimatch';

markMatchingPaths() {
  this.dataSource.data.map(p => p.matchesPattern = false);
  const wildcards = this.currentDataSource.data.filter(w => w.path.includes('*'));

  wildcards.forEach(w => {
    this.dataSource.data.forEach(p => {
      const res = minimatch(p.path, w.path);
      if (res) {
        p.matchesPattern = true;
      }
    });
  });
}

我用带有[class.someName]的布尔值向路径周围的范围添加一个类。现在,它们以不同的颜色突出显示。