angular - 突出显示匹配模式的路径(Angular 7)
问题描述
我有一个路径列表,其中可以包含通配符。过滤/突出显示与包含通配符的路径匹配的路径的最佳方法是什么?因此,当您还拥有路径“/server/*”f.ex 时,将标记路径“/server/test/block”。到目前为止,我已经尝试将 .filter 与 .contains 嵌套,并检查数组是否大于 1。但是,这只会给出完全匹配,而且我没有找到将相同类添加到彼此匹配的类的好方法.
为了运行该函数,我在我的 mat-cell 上测试了 [innerHTML]-selector,但该函数运行了很多次。我还在 mat-cell 内的跨度上使用 [class.someName]-selector 进行了测试,但这也会多次调用该函数。任何关于我应该寻找的方向的指针将不胜感激。
数据使用材料表显示。
解决方案
我最终向数据集“matchesPattern”添加了一个布尔值。我发现了一个名为 minimatch 的 npm 模块,它根据模式匹配与否给出一个布尔值。
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] 的布尔值将类添加到路径周围的跨度。它们现在以不同的颜色突出显示。
推荐阅读
- tensorflow - 使用 model.predict 训练 CartPole-v0 OpenGym 时出错
- python - 在张量流中使用 conv2d
- c++ - 无法弄清楚导致此崩溃的原因 (SIGABRT)
- matplotlib - plt.plot() 显示 X 的点,如何只有这条线?
- javascript - 是否可以将带有参数的函数作为道具传递,然后将该函数作为道具引用?
- mamp - MAMP 升级 - 无法访问现有数据库
- java - 如何将 http 请求发送到 php 文件并获得结果?
- lora - Live Objects 上的上行链路和未处理的下行链路的顺序
- php - 我在输入类型日期中尝试将日期格式 mm/dd/yyyy 转换为 dd/mm/yyyy
- c# - asp.net core api模型中的datetimeoffset