如何在角度2中通过[隐藏]隐藏表格元素? [英] How hide element of table by [hidden] in angular 2?
问题描述
我有同一个表，带有按钮添加行事件.
I have same table, with buttons add rows event.
队列: 我想隐藏表格元素，并在按钮Добавить"上添加show click事件，这是html代码示例:
Que.: I want hide the table element, and add show click event on button "Добавить", this is sample of html code:
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="panel-title">
Подразделение (ввод)
</h4>
</div>
<table class="table table-bordered">
<tr>
<th>Номер</th>
<th>Тип подразделения</th>
<th>Тип района</th>
<th>Точки старта</th>
<th>Удалить</th>
</tr>
<tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
<td>
<input type="text" class="form-control">
</td>
<td>
<select class="form-control">
<option selected>-----</option>
<option value="Д">Д</option>
<option value="Б">Б</option>
<option value="П">П</option>
</select>
</td>
<td>
<select class="form-control">
<option selected>-----</option>
<option value="Основной">Основной</option>
<option value="Запасной">Запасной</option>
<option value="Временный">Временный</option>
</select>
</td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>номер</th>
<th>радиус</th>
<th>X</th>
<th>Y</th>
<th>Высота</th>
<th>Геометрия</th>
<th>Ракеты</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let newrow of row.tochkiStartaForms; let TochkiStartaFormIndex = index">
<td>
<input type="text" class="form-control">
</td>
<td></td>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="text" class="form-control">
</td>
<td></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Тип</th>
<th>Тип ГЧ</th>
<th>Кол-во</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let suchnewrow of newrow.rocketForms; let RocketFormIndex = index">
<td></td>
<td></td>
<td></td>
<td>
<button (click)="deleteRowRocketForm(newrow.rocketForms, RocketFormIndex)" type="button" class="btn btn-default" style="padding: 2px;">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowRocketForm(newrow.rocketForms)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowTochkiStartaForm(row.tochkiStartaForms, TochkiStartaFormIndex)' type="button" class="btn btn-default" style="padding: 2px">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowTochkiStartaForm(row.tochkiStartaForms)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</td>
<td>
<button (click)="deleteRowMainForm(rowDataMainForm, mainFormIndex)" type="button" class="btn btn-default" style="padding: 2px">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowMainForm(rowDataMainForm)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
我知道[隐藏]，但是如何使用?
I know about [hidden], but how to use it?
推荐答案
建议使用ngIf代替hidden. hidden隐藏元素，ngIf不会在DOM->中插入元素，在大多数情况下(并非总是如此)
It's recommended to use ngIf instead of hidden. hidden hides elements, ngIf doesn't insert element to DOM -> better performance in most of cases (not always)
因此您的代码将如下所示:
So your code will look like this:
<button (click)="hideElement = !hideElement">Toggle Element</button>
<div *ngIf="hideElement">
This is hidden if my variable hideElement == true
</div>
注意:如果要经常显示/隐藏元素，那么真正显示/隐藏(使用[hidden])而不是添加/删除(使用*ngIf)
Note: In case you are going to show/hide an element very often, then it makes more sense to really show/hide (using [hidden]) instead of add/remove (using *ngIf)
这篇关于如何在角度2中通过[隐藏]隐藏表格元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
