绑定选择/选项[重复]

Question

我认为我在尝试绑定选择元素时存在根本缺陷。

如果我像这样 [(ngModel)]="selectedPrivilege" 绑定我的选择，则选择开始时没有选择任何内容。如果我删除模型绑定，则 [selected] 属性有效并选择了适当的选项，但没有模型绑定 (ngModelChange) 将不再有效。

我假设我在这里做了一些愚蠢的事情。

  <div class="form-group">
      <label for="privilegeDDL">Privilege</label>
      <select  *ngIf="privileges.length > 0" class="form-control"  id="privilegeDDL" required  [(ngModel)]="selectedPrivilege" (ngModelChange)="onPrivilegeChange($event)"> 
        <option *ngFor="let p of privileges" [ngValue]="p" [selected]="p.level===user.privilege.level"> {{p.name}}</option>
      </select>
  </div>

Answer 1

您应该为selectedPrivilege 分配一个初始值等于选项可以采用的可能值之一，以避免显示空选择。
另外一件事，您应该将选项的ngValue 绑定到p.level 或p.name。
您不能简单地将本机 HTML 选项元素的值绑定到 p，因为根据我从您的代码中了解到的内容，它是一个复杂的对象。
因此，从技术上讲，如果您将ngModel 绑定到p.level，您应该将selectedPrivilege 设置为一个级别可以采用的可能值之一。
这是一个工作示例：

@Component({
  selector: 'exmaple',
  template: `
    <div class="form-group">
      <label>Privilege</label>
      <select [(ngModel)]="selectedPrivilege" (ngModelChange)="onPrivilegeChange($event)">
        <option *ngFor="let p of privileges" [ngValue]="p.level"> {{p.name}}</option>
      </select>
    </div>
  `,
})

export class Example {

  privileges = [
    {
      name: 'Option 1',
      level: '1',
    },
    {
      name: 'Option 2',
      level: '2',
    },
    {
      name: 'Option 3',
      level: '3',
    },
  ];

  public selectedPrivilege = '1';

  public onPrivilegeChange(value: any) {

    // Making sure that the two-way data binding works properly
    console.log('select value', value);
    console.log('selectedPrivilege', this.selectedPrivilege);
  }

}