Как показать определенные элементы в <td>, если информация пуста

Question

Я новичок в угловых и я использую ngFor внутри, чтобы заполнить таблицу.Мой вопрос: если массив, который присутствует [let i of user.acessTypes] в ngFor, пуст, как я могу показать строковую информацию «Пусто» в соответствующей строке?

Это моя таблица html

 <table class="table table-bordered">
          <tr>
            <th>Email</th>
            <th>Acess Type</th>
          </tr>
          <tr *ngFor="let user of listUser">
            <td>{{user.email}}</td>
            <td>
              <button class="btn btn-primary"
               *ngFor="let i of user.acessTypes">
               //if i is empty show "Is Empty"
               {{i.accessTypeName}}({{i.subAcessTypeName}})                  
             </button> </td>
          </tr>
        </table>

Это мой ответ JSON

{
    "data": [  
        {
            "id": 1,
            "email": "jose@hotmail.com",
            "password": "$2a$10$44ghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.XEh7avm2GOxlUC",
            "isAdmin": 0,
            "acessTypes": [
                {
                    "id": 1,
                    "accessTypeName": "User",
                    "subAcessTypeName": "Ver&Escrever"
                }
            ],
            "tomas": [],
            "consultas": [],
            "profile": "NORMALUSER"
        }
    ],
    "dataArray": null,
    "errors": []
}

Answer 1

Просто вы можете создать правильную проверку проверки следующим образом.

<table class="table table-bordered">
   <tr>
      <th>Email</th>
      <th>Acess Type</th>
   </tr>
   <tr *ngFor="let user of listUser">
      <td>{{user.email}}</td>
      <td>
         <button class="btn btn-primary"
            *ngFor="let i of user.acessTypes">
            <div *ngIf="i.accessTypeName.length == 0">
                Is Empty 
            </div>
            <div *ngIf="i.accessTypeName.length != 0">
               {{i.accessTypeName}}({{i.subAcessTypeName}})
            </div>
         </button>
      </td>
   </tr>
</table>

Answer 2

Вы можете просто проверить, используя * ngIf следующим образом,

<button class="btn btn-primary" *ngFor="let i of user.acessTypes">
   <ng-template *ngIf="i">
   {{i.accessTypeName}}({{i.subAcessTypeName}})                  
   </ng-template>
   <ng-template *ngIf="!i">
     Is Empty         
   </ng-template>
</button> </td>

Answer 3

Есть несколько подходов.Один из них работает с оператором if-else по Angular way.ng-container и ng-template не будут частью дерева DOM после их рендеринга.

Вот хороший ресурс, который объясняет это более подробно: https://toddmotto.com/angular-ngif-else-then

<table class="table table-bordered">
  <tr>
    <th>Email</th>
    <th>Acess Type</th>
  </tr>
  <tr *ngFor="let user of listUser">
    <td>{{user.email}}</td>
    <td>
        <ng-container *ngIf="user.acessTypes.length > 0; else noAccessTypes">
            <button class="btn btn-primary" *ngFor="let i of user.acessTypes">
                {{i.accessTypeName}}({{i.subAcessTypeName}})                  
            </button> 
        </ng-container>
        <ng-template #noAccessTypes>
            <button class="btn btn-primary">Is empty</button>
        </ng-template>
     </td>
  </tr>
</table>

Answer 4

<table class="table table-bordered">
    <tr>
        <th>Email</th>
        <th>Acess Type</th>
    </tr>
    <tr *ngFor="let user of listUser">
        <td>{{user.email}}</td>
        <td>
            <button class="btn btn-primary"
                    *ngFor="let i of user.accessTypes">
                //if i is empty show "Is Empty"
                {{i.accessTypeName}}({{i.subAcessTypeName}})
            </button>
            <button class="btn btn-primary" *ngIf="user.accessTypes.length == 0">Is Empty</button>
        </td>
    </tr>
</table>