Фильтрация значений массива - оператор 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 для каждого элемента. Всякий раз, когда textSelector возвращает true, создается элемент 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;
}

Пожалуйста, дайте мне знать, если у вас есть какие-либо проблемы или вам нужно объяснение.

Answer 2

попробуйте это. Может работать

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;
    }
  }