Question

我正在尝试将select元素绑定到true / false值。绑定似乎是由于未显示-- select --选项而发生的，这意味着Angular知道有一个值，但是默认情况下显示为空白。如果单击它，则会看到我的“是”和“否”选择，但最初并未设置。

        <select class="form-control" id="primary" name="primary" required
                [(ngModel)]="primaryValue">
            <option *ngIf="primaryValue === null" [ngValue]="null">-- Select --</option>
            <option [ngValue]="true">Yes</option>
            <option [ngValue]="false">No</option>
        </select>

primaryValue在打字稿文件中的定义如下：

@Input() primaryValue: boolean;

如果仅使用输入执行此操作，则效果很好，但是如果我将primaryValue用作输入和输出，则它将不起作用。您可以在StackBlitz

上看到一个示例

Answer 1

双向绑定也称为“盒子里的香蕉”绑定，即[（）]。

在您的AppComponent.html中，反转括号的顺序以正确绑定

<app-question-group [(primaryValue)]="valueOne"></app-question-group>

Answer 2

最后找到了它。在显示问题的组件中，我将此作为@Component定义的一部分：

viewProviders: [  // This makes the whole child participate in the parent's form validation
    {
        provide: ControlContainer,
        useExisting: NgForm
    }
]

我在网上看到的

使得子控制器的组件成为父组件的表单验证的一部分。我一卸下那部分，一切就开始正常工作。

Answer 3

您必须传递boolean值才能设置初始值。

<app-lab-hazard-classification-question-group 
    (change)="onHazardValueChanged($event)"
    primaryQuestion="Primary Question One"
    [primaryValue]="true"                         <!-- Set the boolean value -->
    secondaryQuestion="Secondary Question One" 
    [secondaryValue]="false">                     <!-- Set the boolean value -->
</app-lab-hazard-classification-question-group>

工作副本在这里-https://stackblitz.com/edit/angular-5mdctu

绑定到true / false值的角度“选择”不起作用

3 个答案: