从 Angular HTML 中的函数打印数组

发布于 2025-01-11 13:15:33 字数 985 浏览 0 评论 0原文

我正在做一个应用程序,我打印一些汽车(我从数据库接收它们),在一列中我有一个带有多个标签的字符串,这些标签用逗号分隔,我创建了一个函数来将其作为单词数组接收,然后打印 make 标签的每个单词,但我真的不知道如何调用该函数或如何执行它,因为它在不应该这样做时重复多次。

<!-- Category Card -->
<div *ngFor="let car of cars" class="col-md-4">
  <div class="card-image-overlay m-auto" id="tags">
    {{separar(car?.tags)}}
  </div>
</div>

然后是函数“separar”的代码:

public separar(string) {
  var palabras = [];
  palabras = string.split(",");
  for (var i = 0 ; i < palabras.length ; i++) {
    document.getElementById("tags").innerHTML +=
      ("<span class='card-detail-badge'>" + palabras[i] + "</span>");
  }
}

我得到这个:

在此处输入图像描述

并且它应该只打印这些标签的 3 倍。

可能是一个很容易犯的错误,但我是角度新手,我的老师不知道为什么它不起作用。 :(

I'm doing an app where I print some cars (I receive them from the database) and in one column I have one string with multiple tags that are divided by commas, I made a function to receive that as an array of words and then print each word for make tags, but I don't really know how to call the function or how to do it because it's repeating multiple times when it shouldn't do that.

<!-- Category Card -->
<div *ngFor="let car of cars" class="col-md-4">
  <div class="card-image-overlay m-auto" id="tags">
    {{separar(car?.tags)}}
  </div>
</div>

Then the code of the function "separar":

public separar(string) {
  var palabras = [];
  palabras = string.split(",");
  for (var i = 0 ; i < palabras.length ; i++) {
    document.getElementById("tags").innerHTML +=
      ("<span class='card-detail-badge'>" + palabras[i] + "</span>");
  }
}

I'm getting this:

enter image description here

and it should only print 3 times those tags.

Probably is a mistake very easy but Im new to angular and my teacher doesn't know why it doesn't work. :(

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

烟酒忠诚 2025-01-18 13:15:33

使用 ngFor 来“以 Angular 方式”进行操作

Use ngFor to do it "the Angular way" ????

getTags(tags: sring): string[] {
  return tags.split(',');
}
<!-- Category Card -->
<div *ngFor="let car of cars" class="col-md-4">
  <div class="card-image-overlay m-auto" id="tags">
    <span class='card-detail-badge' *ngFor="let tag of getTags(car?.tags)">
      {{tag}}
    </span>
  </div>
</div>
最单纯的乌龟 2025-01-18 13:15:33

尝试从模板函数返回 HTML 字符串。

另外,避免使用变量的常见(有时是“保留”)词,即使用 tagListStr 而不是 string

public separar(tagListStr) {
  return tagListStr
    .split(",")
    .map(tag => `<span class='card-detail-badge'>${tag}</span>`)
    .join('');
}

Try returning the HTML string from the template function instead.

Also, avoid common (sometimes "reserved") words for variables i.e use tagListStr instead of string.

public separar(tagListStr) {
  return tagListStr
    .split(",")
    .map(tag => `<span class='card-detail-badge'>${tag}</span>`)
    .join('');
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文