Как отобразить сообщение, когда <div>пусто с угловым и есть фильтр?

Question

Я пытаюсь создать условие при отображении моих данных, отображаемых по состоянию.

На данный момент у меня есть 3, в которые я загружаю свой компонент и который отображает этот компонент, если статус соответствует, но я хотел бы иметь возможность отображать сообщение, если не отображаются компоненты.

Я пытался сделать ngIf, но он не работает. Я не знаю, правильно ли я поступаю в нужном месте.

index.component.html:

<div class="container-fluid project-dashboard">
                <h2><span >En cours </span><i class="fa fa-info-circle" placement="right" ngbTooltip="Projets en cours de traitements par l'équipe"></i></h2>
                <app-detail-tiles [childDetailComp]="House | filter:'En cours'"></app-detail-tiles>
                <li class="linkProjectListDashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a
                    [routerLink]="['/pages/page-projects-list']">Voir tous les projets</a></li>
            </div>
            <div class="container-fluid project-dashboard">
                <h2><span>Informations manquantes </span><i class="fa fa-info-circle" placement="right" ngbTooltip="Informations manquantes pour continuer le projet"></i></h2>
                <app-detail-tiles [childDetailComp]="House | filter:'Informations manquantes'"></app-detail-tiles>
                <li class="linkProjectListDashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a
                    [routerLink]="['/pages/page-projects-list']">Voir tous les projets</a></li>
            </div>
            <div class="container-fluid project-dashboard">
                <h2><span>Déjà publié </span><i class="fa fa-info-circle" placement="right" ngbTooltip="Projets terminés et publiés"></i></h2>
                <app-detail-tiles [childDetailComp]="House | filter:'Déjà publié'"></app-detail-tiles>
                <li class="linkProjectListDashboard" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}"><a
                    [routerLink]="['/pages/page-projects-list']">Voir tous les projets</a></li>
            </div>

У меня есть 3 div, в которых я называю компонент "app-detail-tile" и который фильтрует по статусу.

подробно-tiles.component.html:

  <div class="row clearfix">
    <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">
      <div class="card overflowhidden  border">
        <div class="body">
          <div class="number">
            <h6>{{ projet.title | uppercase }}</h6>
            <img class="img-fluid" src="{{ projet.img }}" />
            <div class="container-overlay">
              <div class="overlay img-fluid">
                <div class="items"></div>
                <div class="items head">
                  <p><span>Type</span>: {{ projet.type }}</p>
                  <p><span>Ville</span>:  {{ projet.city }}</p>
                  <p><span>Agence</span>: {{ projet.owner }}</p>
                  <p><span>Adresse</span>: {{ projet.street }}</p>
                  <p><span>Status</span>: {{ projet.projectStatus }}</p>
                </div>
                <div class="items price">
                  <p><span>Surface</span>: {{ projet.surface }} m²</p>
                </div>
              </div>
            </div>
          </div>
          <small class="text-muted badge">{{ details }}</small>
        </div>
      </div>
    </div>
  </div>

В этом компоненте я зацикливаю свой массив объектов для отображения различных деталей.

---

Я бы хотел, чтобы компонент отображал правильную информацию, если статус соответствует, иначе я бы отобразил сообщение.

пример: если status == 'x-status' загружает информацию, в противном случае отображается сообщение

Спасибо за вашу помощь!

Answer 1

    *** Can be achieved in many ways***


        //option 1      
              <div class="row clearfix">
                          <div *ngIf="childDetailComp.length>0"> // type 1
                           <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                            </div>
                            <div *ngIf="childDetailComp.length === 0">
                               // error message
                            <div>
                          </div>
            //option 2
                <div class="row clearfix">
                             <ng-container *ngIf="childDetailComp.length > 0; else message">
                               <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                                </div>
                                <div *ngIf="childDetailComp.length === 0">
                                   // error message
                                <div>
                        </ng-container>
                        <ng-template #message>
                            // error message
                        </ng-template>
                        </div>
              //option 3  
assign a boolean value in .ts file
                let showTable = childDetailComp !== undefined?childDetailComp.length >0 ? true : false:false;

                    <div class="row clearfix">
                            <div *ngIf="showTable; else message">
                           <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                                </div>
                        <ng-template #message>
                            // error message
                        </ng-template>
                        </div>

             //option 4   
assign a boolean value in .ts file
                let showTable = childDetailComp !== undefined?childDetailComp.length >0 ? true : false:false;

                    <div class="row clearfix">
                    <ng-template
                      *ngIf="showTable; else message">
                    </ng-template>

                <ng-template #showTable>
                           <div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">

                                </div>
                    </ng-template>
                        <ng-template #message>
                            // error message
                        </ng-template>
                        </div>

Hope it helps :)

Answer 2

Вы можете использовать ng-container и ng-template для достижения этой цели.

<div class="row clearfix">
<ng-container *ngIf="childDetailComp && childDetailComp.length > 0; else emptyMessage">
<div *ngFor="let projet of childDetailComp" class="col-lg-3 col-md-6 col-sm-6">
  <div class="card overflowhidden  border">
    <div class="body">
      <div class="number">
        <h6>{{ projet.title | uppercase }}</h6>
        <img class="img-fluid" src="{{ projet.img }}" />
        <div class="container-overlay">
          <div class="overlay img-fluid">
            <div class="items"></div>
            <div class="items head">
              <p><span>Type</span>: {{ projet.type }}</p>
              <p><span>Ville</span>:  {{ projet.city }}</p>
              <p><span>Agence</span>: {{ projet.owner }}</p>
              <p><span>Adresse</span>: {{ projet.street }}</p>
              <p><span>Status</span>: {{ projet.projectStatus }}</p>
            </div>
            <div class="items price">
              <p><span>Surface</span>: {{ projet.surface }} m²</p>
            </div>
          </div>
        </div>
      </div>
      <small class="text-muted badge">{{ details }}</small>
    </div>
  </div>
</div>
</ng-container>

<ng-template #emptyMessage>
    <div> Project List is empty </div>
</ng-template>

Answer 3

добавьте точку с запятой (безопасный оператор) перед .length Как это

<ng-container *ngIf="childDetailComp?.length > 0; else emptyMessage">