Блог

Главная - Вопросы по программированию - отображение данных через запятую в угловом формате на основе условия

отображение данных через запятую в угловом формате на основе условия

#angular #angular8 #angular9 #angular10

Вопрос:

Я работаю над угловым приложением. У меня есть ngFor в моем html-коде, который выглядит следующим образом.

 <span *ngFor="let data of myData">
                <img  src="assets/myImage.png">
                <span>
                    {{data.title}}</span>,
            </span>

Проблема в том, что массив myData может иметь одно или несколько значений во время выполнения. Я хочу, чтобы отображение было таким, чтобы при наличии одного значения отображалось только одно значение, но если присутствует более одного значения, они должны быть разделены запятой. В моем приведенном выше коде я просто поставил «,» после span. Он отлично работает с несколькими значениями, но в случае одного значения запятая все равно будет там. Как я могу это сделать?

Ответ №1:

вы можете использовать last локальную переменную *ngFor директивы https://angular.io/api/common/NgForOf#local-variables

 <span *ngFor="let data of myData; last as isLast">
                <img  src="assets/myImage.png">
                <span>{{data.title}}</span>
                <ng-container *ngIf="!isLast">,</ng-container>
            </span>

Комментарии:

1. Как каждый раз оставлять немного места после»,». Как будто присутствует больше элементов «,» и следующий элемент отображается очень близко друг к другу

2. с помощью css или ,amp;nbsp;

3. вы имеете в виду, что что-то напоминает этот <ng-контейнер *ngIf=»!isLast»>,<ng-контейнер *ngIf=»!isLast»></ng-контейнер>?

4. да, amp;nbsp; это экранированный html-код для символа пробела

5. ваше решение сработало для меня. Просто вопрос. Есть ли какой — нибудь способ использовать div вместо span и разделять заголовок запятыми?

Метки: