有没有办法为我们在 *ngFor Angular 8 中迭代的每个值生成新的 span 元素？

Question

我想为我的集合标签数组中的每个保存的标签生成一个 span 元素。我使用 firebase 并进入 *ngFor 循环，我得到一个大跨度元素，其中所有保存的标签均以逗号分隔，而不是为每个标签获取一个跨度。有什么办法可以让我无法阻止这种情况的发生吗？我还为“已保存”创建了一个界面。提前致谢。

        <div class="card">
            <div class="card-body">
                <h5 class="card-title text-center">{{saved?.title}}</h5>
                <hr />
                <div *ngFor="let tag of saved.tags">
                    <span class="badge badge-pill badge-primary">{{saved?.tags}}</span>
                </div>
                <hr /> <a href="#" class="btn btn-primary  offset-4 col-md-4">View</a>

            </div>
        </div>

//Saved interface in Saved.ts file
export interface Saved {
  id: string;
  title: string;
  tags: string[];
}

Answer 1

尝试让你的代码像这样。这应该使 span 元素重复而不是 div，然后确保引用单个标签而不是内部的数组。

如果标签有名称/标题属性{{ tag }}交换{{ tag.title}}

看看界面就知道了{{ tag }}。

<div>
  <span *ngFor="let tag of saved.tags" class="badge badge-pill badge-primary">
    {{tag}}
  </span>
</div>

*ngFor有关使用显示数据的Angular 文档的参考。