在角度5中隐藏表格

Question

我正在尝试在使用两个按钮的第一个屏幕上显示使用条款，以防用户点击“接受”按钮，将其定向到身份验证表单，但是如果您单击“拒绝”，则会出现“拒绝的条款” ”屏幕。 我已经做过一些测试，但是遇到了困难。遵循我已经完成的代码。

app.component.html

<div align="center" class="rounded float-center box-login"><br>
  <p> odas as tarefas ou módulos de entrega só devem ser considerados concluídos com o termo de aceite em mãos. Antes disso, é mera especulação. Entregas aceitas são uma saída do processo Validar o escopo, da área de conhecimento de gerenciamento do escopo.
    . Apresentação do Documento Um projeto só pode ser encerrado formalmente a partir do aceite

    <button mat-button type="submit" class="btn btn-danger">Aceitar</button>
    <button mat-button type="submit" class="btn-recused btn-danger">Recusar</button> </p>

  <div *ngIf="visible; then everClicked else oddClicked"></div>
  <button (click)="toggleDiv()">Aceitar os termos</button>


  <ng-template #everClicked>

  </ng-template>

</div>

<ng-template #oddClicked>
  <div class="">
    <div class="row">

      <div align="center" class="rounded float-center box-login">
        <br>
        <div class="logo">
          <img src="assets/images/logo.png" style="width:46%">
        </div>

        <br>

        <form [formGroup]="userForm" (ngSubmit)="onFormSubmit()">

          <mat-form-field class="hcs-full-width">

            <input matInput placeholder="Nome" [formControl]="nameFormControl" [(ngModel)]="name">
            <mat-error *ngIf="nameFormControl.hasError('required')">
              Nome é
              <strong>requirido</strong>
            </mat-error>
          </mat-form-field>


          <mat-form-field class="hcs-full-width">

            <input matInput placeholder="CPF" [formControl]="nameFormControl" [(ngModel)]="cpf" [cpf]="cpf">
            <mat-error *ngIf="nameFormControl.hasError('required')">
              CPF é
              <strong>requirido</strong>
            </mat-error>
          </mat-form-field>

          <!--
            <mat-form-field class="hcs-full-width">
              <input matInput name="cpf" placeholder="CPF" formControlName="cpf" [cpf]="cpf" [(ngModel)]="cpf" required>
              <mat-error *ngIf="formErrorMsgOf(loginForm,'cpf','required')">
                CPF é requirido
              </mat-error>
              <mat-error *ngIf="formErrorMsgOf(loginForm,'cpf','cpf')">
                <strong> Por favor entre com um CPF valido</strong>
              </mat-error>
            </mat-form-field>-->



          <mat-form-field class="hcs-full-width">
            <input matInput placeholder="E-mail" [formControl]="emailFormControl" [(ngModel)]="email">
            <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
              Por favor entre com um endereço de e-mail valido
            </mat-error>
            <mat-error *ngIf="emailFormControl.hasError('required')">
              E-mail é
              <strong>requirido</strong>
            </mat-error>
          </mat-form-field>

          <br>


          <br>

          <button mat-button type="submit" class="btn btn-primary btn-lg btn-block button-size" (click)="Logar()">Enviar</button>

          <div class="space"></div>

        </form>


        <br>
      </div>
    </div>
  </div>

  <br>


</ng-template>

app.component.ts

export class AppComponent implements OnInit {
visible = true;
toggleDiv(){
  this.visible=false;
}

Answer 1

只需更改按钮visible上的切换click

<button (click)="visible=true" mat-button type="submit" class="btn btn-danger">Aceitar</button>
<button (click)="visible=false" mat-button type="submit" class="btn-recused btn-danger">Recusar</button> </p>

  

注意：您可以根据要求逆转病情。