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

仅当我选择了以下选项时，我才想显示按钮或表格：

图片：

我的代码：

.html

-选择一个容器- {{v.Name} {{selectedValue.Name} 矩阵：{{selectedValue.Matricule}} 材质：{{selectedValue.Material}} 数量：{{selectedValue.Quantity} Coordonates:{{selectedValue.Coordonates} 第二代 我的文件.ts：

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

---

您可以将下拉列表的选定值存储在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>

---

你好谢谢你的回答。这对我不起作用。这是隐藏我的选项值，我想隐藏表和我的按钮。它应该能正常工作，请检查模态选择值在您更改/选择DropDown中的值后是否得到正确更新。希望您在HTML中使用它之前先在组件中设置ngmodal变量。如果没有，那么请看这个，我只是用我的一组.ts文件编辑了我的帖子，我不太明白ng model Works看起来像是你用帖子而不是你的，但没问题，我正确地编辑了你的问题。请参阅更新后的答案，我在其中展示了如何为ngmodal添加selectedValue。如何在选择事件中将ShowValue设置为true或false？

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

You can use *ngIf="show" on button and table.
Set "show" value as true or false on click or change event of select.

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

<div *ngIf="show" 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 *ngIf="show" type="button" class="btn btn-success" data-toggle="modal">Generationp</button>

.ts
--------

show: boolean = false;
    setShowTrue(name: any){
      console.log(name);
      this.show = true;
    }