过滤数组值 - return 语句不会结束函数

Question

我一直在想一些我认为应该很容易的事情，但我似乎无法解决。

我有一个数组，其中包含不同类型的文本，这些文本未排序。

因此，我想根据文本类型的优先级仅可视化其中一个。

以下是数据示例：

所以我从模板触发一个函数：

<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”文本。

有人可以给我一个提示我做错了什么吗？我将不胜感激！

Answer 1

了解模板代码的作用很重要：它迭代并elements.Event.Texts调用textSelector每个元素。只要返回 true，就会创建一个元素。textSelectorp我会建议一种不同的方法。只调用一次函数，因为您只需要一个值。&nbsp;<p *ngIf="textSelector(elements.Event.Texts)">{{bestText}}</p>这就是我编写函数的方式。我会使用一个数组来设置优先级，所以它更易于维护。const order = ["VeryShort", "Short", "Medium"];textSelector(items: any[]) {&nbsp; let bestItem;&nbsp; for (const item of items) {&nbsp; &nbsp; if (item.Type === order[0]) {&nbsp; &nbsp; &nbsp; this.bestText = item.Value;&nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; }&nbsp; &nbsp; if (!bestItem) {&nbsp; &nbsp; &nbsp; bestItem = item;&nbsp; &nbsp; } else if (order.indexOf(item.Type) < order.indexOf(bestItem.Type)) {&nbsp; &nbsp; &nbsp; bestItem = item;&nbsp; &nbsp; }&nbsp; }&nbsp; if (!bestItem) {&nbsp; &nbsp; return false;&nbsp; }&nbsp; this.bestText = bestItem.Value;&nbsp; return true;}如果您有任何问题或需要解释，请告诉我。

Answer 2

试试这个。它可能有效textSelector(item: any) {if (item.Type === 'VeryShort') {&nbsp; this.bestText = item.Value;&nbsp; return true;} else&nbsp; if (item.Type === 'Short') {&nbsp; &nbsp; this.bestText = item.Value;&nbsp; &nbsp; return true;&nbsp; } else if (item.Type === 'Medium') {&nbsp; &nbsp; &nbsp; this.bestText = item.Value;&nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; }