javascript - 过滤数组值 - return 语句不会结束函数
问题描述
我一直在想一些我认为应该很容易的事情,但我似乎无法解决。
我有一个数组,其中包含不同类型的文本,这些文本未排序。
因此,我想根据文本类型的优先级仅可视化其中一个。
以下是数据示例:
所以我从模板触发一个函数:
<ng-container *ngFor="let text of elements.Event.Texts">
<p *ngIf="textSelector(text)">{{bestText}}</p>
</ng-container>
这是功能:
textSelector(item: any) {
if (item.Type === 'VeryShort') {
this.bestText = item.Value;
return true;
} else {
if (item.Type === 'Short') {
this.bestText = item.Value;
return true;
} else {
if (item.Type === 'Medium') {
this.bestText = item.Value;
return true;
} else {
return false;
}
}
}
我只需要导出一个文本 - 按“文本类型”优先级。
就我而言,对于屏幕截图中的示例,我得到了“Short”和“VeryShort”文本。
有人可以给我一个提示我做错了什么吗?我将不胜感激!
最好的祝福!
解决方案
了解模板代码的作用很重要:它迭代并elements.Event.Texts
调用textSelector
每个元素。只要返回 true,就会创建一个元素。textSelector
p
我会建议一种不同的方法。只调用一次函数,因为您只需要一个值。
<p *ngIf="textSelector(elements.Event.Texts)">{{bestText}}</p>
这就是我编写函数的方式。我会使用一个数组来设置优先级,所以它更易于维护。
const order = ["VeryShort", "Short", "Medium"];
textSelector(items: any[]) {
let bestItem;
for (const item of items) {
if (item.Type === order[0]) {
this.bestText = item.Value;
return true;
}
if (!bestItem) {
bestItem = item;
} else if (order.indexOf(item.Type) < order.indexOf(bestItem.Type)) {
bestItem = item;
}
}
if (!bestItem) {
return false;
}
this.bestText = bestItem.Value;
return true;
}
如果您有任何问题或需要解释,请告诉我。
推荐阅读
- html - 引导程序中的剩余边距
- git - 相同的 git repo 用于工作和家庭项目,差异很小
- video - Vimeo 视频 - HTML5 标记内的自动质量
- python - 通过展平两列创建 python 数据框
- angularjs - 量角器AngularJs,改变位置
- twitter-bootstrap - 为什么我不能在 Bootstrap 4 中结合 justify-content-center 和 justify-content-lg-left?
- javascript - 即使生成了 GitHub 安装访问令牌,回调也会失败
- sql - 拥有 75% 订单的客户 - SQL
- c++ - C ++在可变参数模板中获取许多元素
- xslt - 如何将此格式 mm/dd/yy 转换为 yyyy-mm-dd 并在 xslt 中添加 hh:mm:ss