由于 ngIf，组件的引用保持隐藏答案

【问题标题】：keep reference of components hidden due to ngIf由于 ngIf，组件的引用保持隐藏
【发布时间】：2018-04-21 15:03:54
【问题描述】：

我有一个问题 div，它使用 ngFor 生成一些子组件。这些子组件具有数据输入字段。当用户在这些字段中输入数据并单击下一步按钮时，问题 div 被 ngIf 隐藏并出现预览 div。当再次按下后退按钮时，预览 div 会用 ngIf 隐藏，并且会出现问题 div。但是由于再次创建了问题 div 中的子组件，因此输入字段中的数据消失了。以下是我的html

<!-- questions

     div-->
    <div class="questions activity_screen" *ngIf="showquestions">
                <div *ngFor="let component of components;let i=index">
                    <app-termhost #cmp [term] = component [title]="component.title" [Qnumber]="i+1"></app-termhost>
                </div>
                <a class="submit_button" (click)="getdata()">Submit</a>
            </div>
        <!-- preview div-->
            <div style="width: 100%;height: 100%;display: flex;align-content: center;justify-content: center" class="preivew" *ngIf="showpdf">
                <button (click)="goback()">go back</button>
            </div>

如何保持这些组件以前的状态，以便在按下返回按钮后再次出现问题 div 后不会丢失数据！

【问题讨论】：

不使用 *ngIf，使用 [ngClass]="{'hidden':condition}"，在 css .hidden{display:none}

标签： angular angular2-template angular2-forms angular2-directives

【解决方案1】：

尝试使用 hidden 属性而不是 *ngIf，hidden 将仅与 css 一起播放，但 *ngIf 将完全删除元素：

 [hidden]="condition"

【讨论】：