Angular: ngFor элементы данных и отображать пользовательское сообщение, если оно пустое - PullRequest
Новая
       39

Angular: ngFor элементы данных и отображать пользовательское сообщение, если оно пустое

0 голосов
/ 06 октября 2018

Я зацикливаю свой список данных и отображаю в виде тегов span: 

<span  *ngFor="let d of myData; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>

Как видите, я добавляю запятую **, значения элементов между

это выглядит так :: 

AAA,BBB,CCC,DDD,

Но бывает , что мои данные будут пустыми : поэтому я хочу отобразить некоторую пользовательскую строку вместо: "NO ITEMS"

Я хочу обработать это в части HTML, с трубами

Предложения?

Ответы [ 5 ]

0 голосов
/ 06 октября 2018

Вы можете создать свой собственный канал, который оценивает список и отвечает на один по умолчанию, если исходный список пуст.Например:

Определите канал следующим образом: 

@Pipe({name: 'empty'})
export class EmptyPipe implements PipeTransform {
  transform(value: any[], emptyText: string = 'NO ITEMS'): any {
    return value && value.length > 0? value : [{name: emptyText}];
  }
}

Добавьте канал в объявление вашего модуля: 

NgModule({
  imports: [ BrowserModule ],
  declarations: [ AppComponent, EmptyPipe ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

И, наконец, используйте канал в* ngДля следующего содержания: 

<span  *ngFor="let d of myData | empty; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>
0 голосов
/ 06 октября 2018

Использование труб для этого не нужно, так как один ngIf и ngElse должны его решить, или даже двойная обработка ngIf с противоположными условиями.

0 голосов
/ 06 октября 2018

Вы можете использовать конструкцию ngIf ... else для отображения альтернативного шаблона, когда массив не содержит данных.Чтобы не добавлять контейнер HTML вокруг внешнего элемента span, оберните его внутри ng-container (который не отображается в выводе HTML): 

<ng-container *ngIf="myData.length > 0; else noItems">
  <span *ngFor="let d of myData; last as isLast">
    {{d.name}} 
    <span *ngIf="!isLast">,</span>
  </span>
</ng-container>
<ng-template #noItems>
  NO ITEMS!!!
</ng-template>

См. этот стекблиц для демонстрации.

0 голосов
/ 06 октября 2018

Решение с использованием каналов

Идея состоит в том, чтобы добавить еще один элемент в myData, если он пуст, иначе оставить его нетронутым, как это:

Создать новый файл data.pipe.ts добавить следующеесодержимое в нем: 

import { Pipe, PipeTransform } from '@angular/core'

@Pipe({
    pure: false, // We need to update if it change, you are free to remove if you don't want this behaviour
    name: 'appData'
})
export class DataPipe implements PipeTransform {
    transform(data: any) { // Here data should be an array.
        if (data.length === 0) {
            return ['NO DATA'];
        } else {
            return data;
        }
    }
}

Теперь в вашем AppModule или в любом модуле (в который вы хотите добавить его) в массиве объявлений добавьте DataPipe (не забудьте добавить импорт) и теперь в вашем файле шаблона: 

<span  *ngFor="let d of myData | appData; last as isLast"> 
{{d.name}} 
<span *ngIf="!isLast">,</span>
</span>
0 голосов
/ 06 октября 2018

Вы можете обернуть список в другой контейнер и отобразить его, только если массив данных не пустой, иначе - отобразить другое пользовательское содержимое, например: 

<div>
    <div *ngIf="myData.length">...// existing list of spans</div>
    <div *ngIf="!myData.length">NO DATA</div>
</div>
...