如何在 angular4 中隐藏 Html table

Question

实际上我是 angular 的新手 4.I 在 angular 4 web api 中创建了一个 table。我想要这样 - 当我按下按钮（更多详细信息）显示 tables headings.but 此处 tables 标题未隐藏。始终显示这样的元素

我只想显示 table 标题和详细信息，仅单击更多详细信息按钮

这是我的 html

     <div class="col-md-6 col-sm-6 col-xs-12">
         <div class="table-responsive">
             <table class="table table-bordered count-Table table-responsive">
                 <thead style="background-color: #859391;color: white;">
                     <tr>
                         <th> Godowns</th>
                         <th> Quantity</th>
                     </tr>
                 </thead>
                 <tbody>
                     <ng-container *ngFor="let godown of godowns;">
                         <ng-container *ngIf="'Godown'==godown.Location">
                             <tr>                                                                    
                                 <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.LocationName}}</div>  </td>
                                 <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.Stock}} </span></div>  </td>
                             </tr>
                         </ng-container>
                     </ng-container>
                 </tbody>
             </table>
         </div>
     </div>

这是我的 ts 文件

 moredetails() {
        this._enqService.FetchGodowndetails(this.itemID, this.userid)
            .subscribe(itemData =>
                this.godowns = itemData,
                error => {
                    console.error(error);

                });
    }

Answer 1

您可以通过在 div 上使用 *ngIf 来实现。

 <div class="col-md-6 col-sm-6 col-xs-12">
     <div class="table-responsive">
         <table class="table table-bordered count-Table table-responsive" *ngIf="godowns?.length">
             <thead style="background-color: #859391;color: white;">
                 <tr>
                     <th> Godowns</th>
                     <th> Quantity</th>
                 </tr>
             </thead>
             <tbody>

                         <tr *ngFor="let godown of godowns;">                                                                    
                             <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.LocationName}}</div>  </td>
                             <td style="padding:0px;"><div class="col-md-12 custom-td">{{godown.Stock}}</div>  </td>
                         </tr>
             </tbody>
         </table>
     </div>
 </div>

或者您可以设置一个布尔变量并在 *ngIf 中使用，当您 api 从服务器成功获取数据时，它将被设置为 true。

Answer 2

*ngIf 注入或删除 dom 元素基于它评估的资源占用率高的元素。

相反，请尝试使用 class 来显示或隐藏 table。

例如，默认情况下 table 是隐藏的，定义一个 class 为“活动”，如果添加则显示 table。在属性 isActive

的帮助下控制 class

[class.active]=“isActive”

点击按钮，您可以将属性切换为

(click)=“isActive = !isActive”

如何在 angular4 中隐藏 Html table

how to hide Html table in angular4

angularjs-directive

angular2-forms

angular2-template

angular