仅当我选择一个选项时,角度显示按钮和区域

我仅在选择一个选项后才显示按钮或表格:

Picture : enter image description here

我的代码:

.html

<div class="liste">
  <select class="form-control" name="Container" (change)="selectChangeHandler($event)">
    <option disabled selected value> -- select an Container -- </option>
    <option *ngFor="let v of values;let i = index" [value]="i">
      {{v.Name}}
    </option>
  </select>
</div>

<div class="tableau">
  <table align="center">
    <tr align="center"><b>{{selectedValue.Name}}</b></tr>
    <tr align="center">
      <td>Matricule: {{selectedValue.Matricule}}</td>
    </tr>
    <tr align="center">
      <td>Material: {{selectedValue.Material}}</td>
    </tr>
    <tr align="center">
      <td>Quantity: {{selectedValue.Quantity}}</td>
    </tr>
    <tr align="center">
      <td>Coordonates: {{selectedValue.Coordonates}}</td>
    </tr>
  </table>
</div>

<button type="button" class="btn btn-success" data-toggle="modal">Generationp</button>
评论
  • 根号四
    根号四 回复

    you can store selected value of dropdown in a ngmodel and use it to show / hide table using ngIf as shown below

    <div class="liste">
                    <select class="form-control" name="Container" (change)="selectChangeHandler($event)" [(ngModel)]="selectedValue">
                        <option disabled selected value> -- select an Container -- </option>
                        <option *ngFor="let v of values;let i = index" [value]="i">
                            {{v.Name}}
                        </option>
                    </select>
                </div>
    
        <div class="tableau" *ngIf="selectedValue!=''">
                        <table align="center">
                            <tr align="center"><b>{{selectedValue.Name}}</b></tr>
                            <tr align="center"><td>Matricule: {{selectedValue.Matricule}}</td></tr>
                            <tr align="center"><td>Material: {{selectedValue.Material}}</td></tr>
                            <tr align="center"><td>Quantity: {{selectedValue.Quantity}}</td></tr>
                            <tr align="center"><td>Coordonates: {{selectedValue.Coordonates}}</td></tr>
                        </table>
                    </div>
    
    <button type="button" class="btn btn-success" data-toggle="modal">Generationp</button>