如何使用bootstrap和angular 7折叠表

Question

I have created a simple form which have some details, and i am storing all the values entered using local storage of angular. Now i want to print all the values in a table and that table should be collapsible. I am not able to collapse the table. Please help me rectifying what i am doing wrong.

  
 
  
  
  
 
   
 
    
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row">
  
    <div class="col-md-6 login-container">
      <h2 style="margin: auto">User Information</h2>
      <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
        <div class="form-group">
          <label for="username">Username :</label>
          <input type="text" class="form-control" formControlName="username" id="username" autocomplete="on">
          <div class="error" *ngIf="userForm.controls['username'].hasError('required') && userForm.controls['username'].touched">
            UserName is required
          </div>
         </div>
         <div class="form-group">
            <label for="cty">City</label>
            <select class="form-control" id="city" formControlName="city">
              <option *ngFor="let cty of city" [value]="cty.name">{{cty.name}}</option>
            </select>
            <div class="error" *ngIf="userForm.controls['city'].hasError('required') && userForm.controls['city'].touched">
                City is required
              </div>
          </div>
         <div class="form-group">
           <label for="mblNo">Mobile Numer :</label>
           <input type="mobileNumber"  class="form-control" formControlName="mobileNumber" id="mobileNumber" autocomplete="on">
           <div class="error" *ngIf="userForm.controls['mobileNumber'].hasError('required') && userForm.controls['mobileNumber'].touched">
              mobileNumber is required
            </div>
            <p *ngIf="mobileNumber.errors?.minlength">mobileNumber should be atleast 10 digits</p>
          </div>
          <div class="form-group">
              <label>
                  <input type="radio" value="Male" formControlName="gender">
                    <span>male</span>
                </label>
                <label>
                  <input type="radio" value="Female" formControlName="gender">
                    <span>female</span>
                </label>
                <div class="error" *ngIf="userForm.controls['gender'].hasError('required') && userForm.controls['gender'].touched">
                    Gender is required
                  </div>
          </div>
         
          <br>
          <button class="btn btn-success" [disabled]="userForm.invalid">Submit</button> 
          <div *ngIf="invalidLogin" class="error">
              <div>Invalid credentials.</div>
         </div><br>
         <!-- <a data-toggle="collapse" href="#collapseExample">Collapsible panel</a> -->
         
          
         <button class="btn btn-info" type="button" data-toggle="collapse" data-target=".collapseExample">
            Show
          </button> 
         <div class="collapse collapseExample">
          <table class="col-lg-12" >
             <tbody>
               <tr>
                 <th>Name</th>
                 <th>City</th>
                 <th>Mobile Number</th>
                 <th>Gender</th>
               </tr>
               <tr  *ngFor="let item of finalData">
                 <td>{{item.username}}</td>
                 <td>{{item.city}}</td>
                 <td>{{item.mobileNumber}}</td>
                 <td>{{item.gender}}</td>
               </tr>
             </tbody>
           </table>
         </div>
      </form>
      
    </div>
  </div>
 
   
 
  

This is my entire html code, it is still not working for me. I am not understanding what i am missing.

On clicking show button, nothing comes on my screen. Attaching the screenshot too

Answer 1

您可以使用'ng-boostrap'组件https://ng-bootstrap.github.io/#/components/collapse/examples