Angular "select" 绑定到 true/false 值无效

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

双向绑定也称为 "Banana in a box" 绑定，即 [()].

在您的 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

Angular "select" 绑定到 true/false 值无效

Angular "select" binding to a true/false value not working

angular

angularjs-ng-value