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

Question

我想从我的集合标签数组中为每个保存的标签生成一个span元素。我使用firebase并进入*ngFor循环，我得到一个很大的span元素，所有保存的标签都用逗号分隔，而不是每个标签都有一个span。有没有什么办法我不能阻止这一切的发生。我还为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，然后确保引用单个标记，而不是内部的数组。

如果标记具有名称/标题属性，则将{{ tag }}交换为{{ tag.title}}

看看界面，它就是{{ tag }}。

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

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

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>