如果信息为空，如何在 <td> 中显示某些元素

Question

我是 angular 的新手，我在 a 中使用 ngFor 来填充 a table。我的问题是，如果 ngFor 中 [let i of user.acessTypes] 的数组是空的，我如何在相应的行中显示 "Is Empty" 字符串信息？

这是我的tablehtml

 <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": "aghfG4Ym4COxXbj9pDBuOLBXCPRRDiIM7y77G.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.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>

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

有几种方法。其中之一是以 Angular 方式处理 if-else 语句。 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.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>

如果信息为空，如何在 <td> 中显示某些元素

How to show certain elements in <td> if info is empty

html

angular-ng-if

ngfor

angular