从 Angular HTML 中的函数打印数组
我正在做一个应用程序,我打印一些汽车(我从数据库接收它们),在一列中我有一个带有多个标签的字符串,这些标签用逗号分隔,我创建了一个函数来将其作为单词数组接收,然后打印 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:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
使用 ngFor 来“以 Angular 方式”进行操作
Use
ngFor
to do it "the Angular way" ????尝试从模板函数返回 HTML 字符串。
另外,避免使用变量的常见(有时是“保留”)词,即使用
tagListStr
而不是string
。Try returning the HTML string from the template function instead.
Also, avoid common (sometimes "reserved") words for variables i.e use
tagListStr
instead ofstring
.