Question

我有一个研究函数，该函数依赖于许多参数，为了引导用户，我要首先显示一个包含下拉列表和两个文本输入的div，当用户完成填充这些输入时，我想显示第二个div，其中包含一个下拉列表和一个datepicker，当他完成后，我想显示该按钮。结果将显示在表格中，我希望在单击按钮时显示该表格。

现在，我从头开始展示一切，就像这样：

<div class="container">
<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <label> Choose an environment </label> <br>
                <select [(ngModel)]="env" required (change)="onChangeEnv($event.target.value.toLowerCase())">
                    <option selected>Choose an environment</option>
                    <option  *ngFor="let x of environmentsTable"  >
                        {{x.nom | uppercase}}
                    </option>
                </select>
                <br><br>
                <label>Username</label> <br>
                <input type="text" [(ngModel)]="username" />
                <br>
                <label>Password</label> <br>
                <input type="password" [(ngModel)]="password" />
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <label> Choose a type </label> <br>
                <select [(ngModel)]="type" required (change)="onChange($event.target.value.toLowerCase())">
                    <option [ngValue]="null">Choose a type</option>
                    <option  *ngFor="let x of typesTable"  >
                        {{x.nom_type | uppercase}}
                    </option>
                </select>
            </div>
            <div *ngFor="let x of groupesTable">
                <input type="checkbox" [(ngModel)]="x.checked" (change)="foo()">
                {{x.nom_groupe | uppercase}}
            </div>
            <dp-date-picker [(ngModel)]="date" [config]="dateConfig"></dp-date-picker>

            <br>
        </div>
    </div>   
</div>
<br>
<div class="row">
        <button class="btn btn-primary" (click)=postParams() style="margin-left:40%;margin-right:40%">
                Search</button>
</div>
<br>
<div class="table-wrapper-scroll-y my-custom-scrollbar">
    <table class="table table-striped">
            <thead>
                <tr>
                    <th>Type</th>
                    <th>Entité</th>
                    <th>Modifié par</th>
                    <th>Date de modification</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let x of respTest">
                    <th>{{x.Type}}</th>
                    <td>{{x.Entit}}</td>
                    <td>{{x.Modif}}</td>
                    <td>{{x.DateModif}}</td>
                </tr>
            </tbody>
    </table>
</div>

Answer 1

嗯。。这听起来像是大量*ngIf指令的广泛使用。

在component.ts上，您应该初始化env，username和password属性

env: string = undefined;
username: string = undefined;
password: string = undefined;

然后，我们用*ngIf="env && username && password"包装包含datepicker和dropdownlist的第二个div，这将确保仅在上述3个属性具有值之后才显示div。

<div class="col-sm-6" *ngIf="env && username && password">
    <div class="card">
        <div class="card-body">
            <label> Choose a type </label> <br>
            <select [(ngModel)]="type" required (change)="onChange($event.target.value.toLowerCase())">
                <option [ngValue]="null">Choose a type</option>
                <option  *ngFor="let x of typesTable"  >
                    {{x.nom_type | uppercase}}
                </option>
            </select>
        </div>
        <div *ngFor="let x of groupesTable">
            <input type="checkbox" [(ngModel)]="x.checked" (change)="foo()">
            {{x.nom_groupe | uppercase}}
        </div>
        <dp-date-picker [(ngModel)]="date" [config]="dateConfig"></dp-date-picker>

        <br>
    </div>
</div>

在显示/隐藏<div>时，您可以使用相同的逻辑来处理其余组件。

关于按钮

<button class="btn btn-primary" (click)=postParams() style="margin-left:40%;margin-right:40%">Search</button>

您可以做的就是添加另一个名为showTable的属性，单击该属性后，该属性将切换为true。

showTable: boolean = true;

postParams() {
  this.showTable = true;
  // handle the rest
}

然后，我们将*ngIf="showTable"添加到包裹表格的div中，以便仅在单击按钮时显示表格。

<div class="table-wrapper-scroll-y my-custom-scrollbar" *ngIf="showTable">
  <table class="table table-striped">
        <thead>
            <tr>
                <th>Type</th>
                <th>Entité</th>
                <th>Modifié par</th>
                <th>Date de modification</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let x of respTest">
                <th>{{x.Type}}</th>
                <td>{{x.Entit}}</td>
                <td>{{x.Modif}}</td>
                <td>{{x.DateModif}}</td>
            </tr>
        </tbody>
  </table>
</div>

如果我是你，我将使用Angular的reactive forms处理这种情况。但这是另一天的答案！

Answer 2

一种选择是，如果需要所有字段，则第二个div的可见性基于反应形式的有效性。

那么您的逻辑就是：

[Stuff(name=bed), Stuff(name=backpack), Stuff(name=lunch), null]
[Stuff(name=bed), Stuff(name=backpack), Stuff(name=lunch)]

表单有效后，第二个div将可见，并且您不必监视公司或组件属性上的各个字段来更改值。

显示基于另一个div的div

2 个答案: