как свернуть таблицу с помощью bootstrap и angular 7 - PullRequest
Новая
       21

как свернуть таблицу с помощью bootstrap и angular 7

0 голосов
/ 18 апреля 2019

Я создал простую форму, в которой есть некоторые детали, и я сохраняю все введенные значения, используя локальное хранилище углов. Теперь я хочу напечатать все значения в таблице, и эта таблица должна быть разборной. Я не могу свернуть стол. Пожалуйста, помогите мне исправить то, что я делаю неправильно. 

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>   <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>

Это весь мой HTML-код, он все еще не работает для меня. Я не понимаю, чего мне не хватает.

При нажатии кнопки Показать на моем экране ничего не появляется. Прикрепить скриншот тоже enter image description here

1 Ответ

0 голосов
/ 18 апреля 2019

Вы можете использовать компонент ng-boostrap https://ng -bootstrap.github.io / # / components / collapse / examples

...