Угловая функция ответа в HTML

Question

У меня есть функция компонента Angular, которая возвращает строку, которую мне нужно показать в моем HTML.Функция работает, но тег html генерируется как пустой.

Функция:

getTaskNameById(id: any): string {
  console.log('function start; id = ' + id);
  this.tasks.forEach(e => {
    if (e.idTask === Number(id)) {
      console.log('if statement true; name = ' + e.name);
      return e.name;
    }
  });
  return '';
}

HTML:

{{ getTaskNameById(form.value.tasks[i]) }}:

[Console log][1]
[Page look][2]
[Generated HTML][3]
[1]: https://i.stack.imgur.com/Pasl0.png
[2]: https://i.imgur.com/0CKhxLt.png
[3]: https://i.imgur.com/YSkJJrY.png

Answer 1

Ваша строка пуста, потому что невозможно вернуться внутрь Array.forEach.

Нет способа остановить или прервать цикл forEach (), кроме как с помощью исключения.Если вам нужно такое поведение, метод forEach () является неправильным инструментом.

См. документы для получения дополнительной информации.

Вам необходимо изменить его наобычный for-loop или вы можете использовать некоторые встроенные функции Array, например Array.find.Смотрите следующее:

getTaskNameById(id: any): string {
    console.log('function start; id = ' + id);
    const task = this.tasks.find(t => t.idTask === +id);
    if (task) return task.name;
    return '';
}

Answer 2

вам не нужно использовать метод, чтобы получить имя задачи, потому что у вас уже есть мгновение элементов тактов, когда вы зацикливаете массив, как это

<label *ngFor="let t of tasks; let i = index">
      id {{t.idTask}} , name {{ t.name }}<br>
</label>

демо ??