Question

我有相同的表，按钮添加行事件。

阙.: 我想隐藏表元素，并在按钮“Добавить”上添加show click事件，这是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>

我知道[隐藏]，但如何使用它？

Answer 1

建议使用ngIf代替hidden。 hidden隐藏了元素，ngIf未向DOM插入元素 - ＆gt;在大多数情况下（不总是）更好的表现

所以你的代码看起来像这样：

<button (click)="hideElement = !hideElement">Toggle Element</button>
<div *ngIf="hideElement">
    This is hidden if my variable hideElement == true
</div>

注意：如果您要经常显示/隐藏元素，那么真正显示/隐藏（使用[hidden]）而不是添加/删除（使用*ngIf）会更有意义

Answer 2

您必须提供[hidden]的表达式才能使用。例如，您可以使用布尔变量。如果表达式为true，则隐藏元素。

Typescript示例将是：

class MyController{
    private hideElement: boolean = false;

    toggleElement(){
        if(this.hideElement){
            this.hideElement = false;
        else
            this.hideElement = true;
    }
}

现在，您可以在模板中执行此操作：

<button (click)="toggleElement()">Toggle Element</button>
<div [hidden]="hideElement">
    This is hidden if my variable hideElement == true
</div>

如何在角度2中隐藏[隐藏]表格的元素？

2 个答案: