Есть ли способ генерировать новые элементы span для каждого значения, которое мы повторяем в * ngFor Angular 8?

Question

Я хочу сгенерировать элемент span для каждого сохраненного тега из массива моего коллекционного тега. Я использую firebase и вхожу в цикл * ngFor. Я получаю один большой элемент span со всеми сохраненными тегами, разделенными запятой, вместо получения span для каждого тега. Есть ли способ, которым я не могу предотвратить это. Также я создал интерфейс для сохраненных. Заранее спасибо.

        <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, а затем обязательно ссылаться на отдельный тег, а не на массив внутри.

Если у тега есть атрибут name / title, поменяйте местами {{ tag }} на {{ tag.title}}

глядя на интерфейс просто {{ tag }}.

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

Ссылка на угловые документы при использовании *ngFor для отображения данных.

Answer 2

В данный момент вы ссылаетесь на массив внутри вашего *ngFor. Таким образом, в результате вы должны увидеть весь список из n тегов за n раз. Если вы переключитесь с {{saved?.tags}} на {{tag}}. Вы увидите один div для каждого тега, включая один span и один тег внутри.

Так что для получения одного 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>