时间戳

首页 > 解决方案 > 所选选项的角度显示值

angular - 所选选项的角度显示值

问题描述

我想将所选选项的值显示到我的表中：

HTML 文件：

<div class="liste">
  <select class="form-control" name="Container" size="5" (change)="selectChangeHandler($event)">
   <option *ngFor="let v of values" [value]="v">{{v.Name}}
  </select>
</div>
<div class="tableau">
  <table>
   <tr align="center">{{v.Name}}</tr>
   <tr>
      <td>Matricule: {{v.Matricule}}</td>
   </tr>
  </table>
</div>

.ts 文件：

values = [
  { Name: "Container A", Matricule:"ABC" },
  { Name: "Container B", Matricule:"BCD" },
  { Name: "Container C", Matricule:"CDE" },
  { Name: "Container D", Matricule:"DEF" },
  { Name: "Container E", Matricule:"EFG" },
  { Name: "Container F", Matricule:"FGH" },
];

标签： angular

解决方案

首先，选项中的 [value] 不应该是您将其与对象绑定的对象。尝试关注以下

selectedValue = {
  Name: '',
  Matricule: ''
}
values = [{
    Name: "Container A",
    Matricule: "ABC"
  },
  {
    Name: "Container B",
    Matricule: "BCD"
  },
  {
    Name: "Container C",
    Matricule: "CDE"
  },
  {
    Name: "Container D",
    Matricule: "DEF"
  },
  {
    Name: "Container E",
    Matricule: "EFG"
  },
  {
    Name: "Container F",
    Matricule: "FGH"
  },
];


selectChangeHandler(event) {
  this.selectedValue = this.values[event.target.value];

}



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

    <table>
      <tr align="center">{{selectedValue.Name}}</tr>
      <tr>
        <td>Matricule: {{selectedValue.Matricule}}</td>
      </tr>
    </table>

推荐阅读