Angular 2如何设置选择框的开始值？

Question

我希望在我的所有选择框中都有"Select an option"的值，我已经修复了第一个这样的内容：

  <select class="form-control" [(ngModel)]="selectedPrototypeSelector" (ngModelChange)="onPrototypeChange()">
      <option *ngFor="#p of prototypes" [value]="p.selector">
           {{ p.selectorName }}
      </option>
  </select>

并在组件中：

private selectedPrototypeSelector: string = "Select an option";

我在expression.array.ts中创建了一个假对象：

 {
        selector: "Select an option",
        selectorName: "Select an option",
        constraints: "Select an option"
    },

但是我想为所有选择框设置它，这里是第二个第二个选择框的模板：

<select class="form-control" [(ngModel)]="expression.constraint">
     <option *ngFor="#constraint of prototype.constraints" [value]="constraint">
         {{ constraint }}
     </option>
</select>

我将它绑定到对象表达式，我该如何解决这个问题？

这就是我想在photoshop中实现的目标：

以下是Plunker以获得更好的概述。

Answer 1

您可以在constraint对象的expression属性中设置预期值：

addExpression() {
  let expression = new Expression();
  expression.constraint = 'Select an option';
  // This could also be set using another variable
  this.expressions.push(expression);
}

修改

由于表达式组件的selectedPrototypeSelector属性用于选择值，因此需要将其定义为输入

@Input()    
selectedPrototypeSelector: string = 'Select an option';

并在使用组件时提供预期值：

<expression *ngFor="#expression of expressions" 
            selectedPrototypeSelector="arrivalDate" <------
            [prototypes]="prototypes"
            [expression]="expression" 
            [expressions]="expression.children">
</expression>

请参阅此plunkr：https://plnkr.co/edit/LjfiY4?p=preview。

Answer 2

在您的组件上添加selectedPrototypeSelector的初始值。

例如，您可以：

  public barList: string[] = [
    'bar1',
    'bar2',
    'bar3'
  ];

然后：

foo: Foo = new Foo(
  this.barList[0];
)

其中：

class Foo {
  constructor(
    bar: string
  ) {}
}

因此，在您的模板上，为了让barList的第一个元素作为选择框的初始值，您必须：

<select [ngModel]="foo.bar">
  <option  *ngFor="#b of barList" [value]="b">{{b}}</option>
</select>