typescript 如何在角度 2 中通过 [hidden] 隐藏表格元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38125986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How hide element of table by [hidden] in angular 2?
提问by James Emmrich
I have same table, with buttons add rows event.
我有同一张桌子，按钮添加行事件。
Que.: I want hide the table element, and add show click event on button "Добавить", this is sample of html code:
问题：我想隐藏表格元素，并在按钮“Добавить”上添加显示点击事件，这是html代码示例：
<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?
我知道[隐藏]，但如何使用它？
回答by Andrei Zhytkevich
It's recommended to use ngIfinstead of hidden. hiddenhides elements, ngIfdoesn't insert element to DOM-> better performance in most of cases (not always)
建议使用ngIf而不是hidden. hidden隐藏元素，ngIf不插入元素DOM-> 在大多数情况下更好的性能（并非总是如此）
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>
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)
注意：如果您要经常显示/隐藏元素，那么真正显示/隐藏（使用[hidden]）而不是添加/删除（使用*ngIf）更有意义
回答by James Emmrich
You have to provide an expression for [hidden] to use. You can use a boolean variable for example. If the expression is true, the element will be hidden.
您必须提供一个表达式供 [hidden] 使用。例如，您可以使用布尔变量。如果表达式为真，元素将被隐藏。
Typescript example would be:
打字稿示例将是：
class MyController{
private hideElement: boolean = false;
toggleElement(){
if(this.hideElement){
this.hideElement = false;
else
this.hideElement = true;
}
}
Now in your template, you can do this:
现在在您的模板中，您可以执行以下操作：
<button (click)="toggleElement()">Toggle Element</button>
<div [hidden]="hideElement">
This is hidden if my variable hideElement == true
</div>
