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);
  }

}

绑定选择/选项

1 个答案: