Angular function response in HTML

Question

I have an Angular component function which returns a string I need to show in my HTML. The function works, but the html tag generates as empty.

Function:

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.sstatic.net/Pasl0.png
[2]: https://i.imgur.com/0CKhxLt.png
[3]: https://i.imgur.com/YSkJJrY.png

I'm sorry about the bad format, the html part should be in a label tag, the page would not allow me to post no matter how I formatted the code — Davor Micic
– Davor Micic, Commented Sep 19, 2019 at 8:29

Batajus · Accepted Answer · 2019-09-19 08:32:29Z

2

Your string is empty because it is not possible to return inside of Array.forEach.

There is no way to stop or break a forEach() loop other than by throwing an exception. If you need such behavior, the forEach() method is the wrong tool.

See the docs for more information.

You need to change it to a normal for-loop or you can use some Array build in functions, like Array.find. See following:

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

answered Sep 19, 2019 at 8:32

Batajus

6,3453 gold badges28 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Batajus Over a year ago

Great, happy to help =)

Muhammed Albarmavi · Accepted Answer · 2019-09-19 08:54:53Z

0

you don't need to use a method to get the task name because you already have an instant of the taks items when you loop throw the array like this

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

demo 🚀🚀

answered Sep 19, 2019 at 8:54

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

1 Comment

Davor Micic Over a year ago

This was just a demo to showcase the problem, i'm looping through different items in the html hence the need for function. But thank you anyway.

Collectives™ on Stack Overflow

Angular function response in HTML

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related