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

Question

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

        <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 然后确保引用 individual 标签而不是里面的数组。

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

看界面就是{{ tag }}。

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

Reference 到 Angular 有关使用 *ngFor 显示数据的文档。

Answer 2

目前，您正在引用 *ngFor 中的数组。因此，您应该会看到 n 个标签的完整列表 n 次。如果您从 {{saved?.tags}} 切换到 {{tag}}。您将看到每个标签一个 div，包括一个 span 和一个内部标签。

因此，要为每个标签获取一个跨度，请按如下方式使用它：

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

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

Is there a way to generate new span elements for each value we iterate in *ngFor Angular 8?

arrays

angular

typescript

loops

ngfor