突出显示匹配模式的路径（Angular 7）

Question

我有一个路径列表，其中可以包含通配符。 filtering/highlighting 路径匹配包含通配符的路径的最佳方法是什么？这样当您还有路径“/server/*”f.ex 时，路径“/server/test/block”将被标记。到目前为止，我已经尝试将 .filter 与 .contains 嵌套，并检查数组是否大于 1。但是，这只会给出精确匹配，而且我没有找到将相同的 class 添加到的好方法那些彼此匹配的人。

为了运行这个功能，我在我的 mat-cell 上测试了 [innerHTML]-selector，但是这个功能运行很多次。我还在 mat-cell 内的跨度上使用 [class.someName]-选择器进行了测试，但这也会多次调用该函数。任何关于我应该看哪个方向的指示都将不胜感激。

数据显示使用 material table。

Answer 1

我最终向数据集添加了一个布尔值，'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] 一起使用，以将 class 添加到路径周围的跨度中。它们现在以不同的颜色突出显示。

突出显示匹配模式的路径（Angular 7）

Highlight paths matching patterns (Angular 7)

angular-material

angular

angular7

mat-table