java - 仅当我选择一个选项时， Angular 显示按钮和区域

Question

仅当我选择一个选项时，我才想显示按钮或表格:

图片:

我的代码:

.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>

我的文件.ts:

selectedValue = {
        Name: '',
        Matricule: '',
        Material:'',
        Quantity:'',
        Coordonates:'',
    }
    values = [{
        Name: "Container A",
        Matricule: "ABC",
    },
    {
        Name: "Container B",
        Matricule: "BCD",
    }

Answer 1

您可以将下拉列表的选定值存储在 ngmodel 中，并使用它来使用 ngIf 显示/隐藏表格，如下所示

<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>

.ts:

selectedValue = '';
    values = [{
        Name: "Container A",
        Matricule: "ABC",
    },
    {
        Name: "Container B",
        Matricule: "BCD",
    }