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

【问题标题】：How to show certain elements in <td> if info is empty如果信息为空，如何在 <td> 中显示某些元素
【发布时间】：2018-09-25 16:30:54
【问题描述】：

我是 angular 新手，我在 a 中使用 ngFor 来填充表格。我的问题是，如果 ngFor 中存在的数组[let i of user.acessTypes] 为空，我如何在对应行中显示“为空”字符串信息？

这是我的表格 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": []
}

【问题讨论】：

我怎么能是字符串还是空？
什么的，主要是为了显示一个图标，不过现在空着就够了
这里的空是什么意思？似乎我是一个对象
如果 i 里面不包含任何值，那么我想在对应的行中打印类似“No info inside”之类的内容

标签： html angular ngfor angular-ng-if

【解决方案1】：

有几种方法。其中之一是使用 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>

【讨论】：

就是这样 :) 非常感谢鲁本。你一定是葡萄牙人所以 Obrigado :D

【解决方案2】：

<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>

【讨论】：

@jose 你能控制台日志listUser吗？
控制台将日志记录为内部元素，因为它会在包含该信息的行中打印包含信息的表格。我只需要有一个逻辑，以防某些行的 i 内没有任何内容
请注意，我将 accessTypes 更改为 accessTypes，因为我认为这是一个错字

【解决方案3】：

您可以使用 *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>

【讨论】：

你能在 user.accessTypes JSON 中发布你的内容吗
完成，您可以查看
您发布的 JSON 具有访问类型。所以你不会看到空消息，它应该是 accessTypes

【解决方案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>

【讨论】：