如何将 ngModel 值与 Angular 2 中的下拉选项列表绑定？

【问题标题】：How can i bind ngModel value with options list of dropdown in angular 2?如何将 ngModel 值与 Angular 2 中的下拉选项列表绑定？
【发布时间】：2019-10-25 07:29:22
【问题描述】：

示例：

<p-dropdown name="senderId" [options]="senderIdList" [filter]="true" required 
    #senderIdDrpdwn="ngModel" [(ngModel)]="selectedSenderId"></p-dropdown>

在 senderIdList = 包含所有值的列表。在 selectedSenderId = 中具有来自 senderIdList 的值。

但只有当我在下拉列表中选择时输出才显示列表，但我希望 onload 值为（在 ngModel 中），然后单击下拉列表显示所有列表（senderIdList）。

谢谢。

【问题讨论】：

标签： javascript angular frontend dropdown

【解决方案1】：

这里正在工作Example

  selected: any;
  cities = {};

  countries = [
    {
      id: 1,
      name: "Sri lanka"
    },
    {
      id: 2,
      name: "India"
    },

    {
      id: 3,
      name: "Japan"
    }
  ];

  ngOnInit() {

  }

  onChange(deviceValue) {
    console.log(
      "Changed Value is ",
      deviceValue,
      "name",
      this.countries[deviceValue].name
    );
    this.selected = this.countries[deviceValue - 1].name;
   }

.html

<select name="city" class="rounded-inputs20 select-select col-md-3" (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries"  [value]="country.id" >{{country.name}}</option>
  </select>
{{selected}}

【讨论】：