Question

我是angular的新手，并且正在a内使用ngFor填充表格。我的问题是，如果ngFor中存在的数组[让i。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": []
}

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

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

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

Answer 4

您只需按以下步骤创建正确的验证检查即可。

$pd_object = new WC_Product_Download();
$pd_object->set_id($md5_num);
$pd_object->set_name($file_name);
$pd_object->set_file($file_url);
$order_product = new WC_Product();
$order_product -> set_name('ORDER'.$order_id);
$order_product -> set_price(0);
$order_product -> set_virtual(true);
$order_product -> set_downloadable(true);
$downloads = $order_product->get_downloads();
$downloads[$md5_num] = $pd_object;
$order_product -> set_downloads($pd_object);
$order -> add_product($order_product,1);

如果信息为空，如何显示某些元素

4 个答案: