как скрыть HTML-таблицу в Angular4 - PullRequest
Новая
       37

как скрыть HTML-таблицу в Angular4

0 голосов
/ 27 ноября 2018

На самом деле я новичок в angular 4. Я создал таблицу в angular 4 web api. Я хочу вот так - когда я нажимаю кнопку (более подробно), отображаются заголовки таблиц. Но здесь заголовки таблиц не скрыты.всегда показывать элементы, подобные этому

enter image description here

я хочу показать заголовок таблицы и подробности, просто нажав кнопку подробнее

здесьмой 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);

                });
    }

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

* ngIf внедряет или удаляет элементы dom, основываясь на том, что он оценивает, на котором много ресурсов.

Вместо этого попробуйте использовать класс, чтобы показать или скрыть таблицу.

Например, таблица по умолчанию скрыта и определяет класс как «активный», который показывает таблицу, если она добавлена.Управлять классом с помощью свойства isActive 

[class.active]=“isActive”

При нажатии кнопки вы можете переключать свойство как 

(click)=“isActive = !isActive”
0 голосов
/ 27 ноября 2018

вы можете достичь, используя *ngIf в главном div. 

 <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, которая будет установлена ​​в значение true, когда ваши API получают данные с сервера.успешно.

...