HTML中的角度函数响应答案

【问题标题】：Angular function response in HTMLHTML中的角度函数响应
【发布时间】：2020-01-20 05:44:07
【问题描述】：

我有一个 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

【问题讨论】：

你能在stackbiltz中分享一份吗
很抱歉格式不好，html部分应该在标签标签中，无论我如何格式化代码，页面都不允许我发布
@AdritaSharma stackblitz.com/edit/angular-2pbass

标签： html angular typescript angular8

【解决方案1】：

您的字符串为空，因为无法在Array.forEach 内返回。

没有其他方法可以停止或中断 forEach() 循环抛出异常。如果你需要这样的行为，forEach() 方法是错误的工具。

请参阅docs 了解更多信息。

您需要将其更改为普通的for-loop，或者您可以使用一些数组内置函数，例如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 '';
}

【讨论】：

很好，很乐意提供帮助 =)

【解决方案2】：

您不需要使用方法来获取任务名称，因为当您像这样循环抛出数组时，您已经拥有一个即时任务项

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

demo ??

【讨论】：

这只是一个展示问题的演示，我正在循环浏览 html 中的不同项目，因此需要函数。不过还是谢谢你。