Angular "select" 绑定到 true/false 值无效
Angular "select" binding to a true/false value not working
我正在尝试将我的 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
上查看示例
双向绑定也称为 "Banana in a box" 绑定,即 [()].
在您的 AppComponent.html 中,反转括号的顺序以正确绑定
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
终于查到这个了。在显示问题的组件中,我将其作为 @Component
定义的一部分:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
我在网上看到说它使子控制器的组件成为父组件的表单验证的一部分。一旦我删除了那个部分,一切就开始正常工作了。
您必须通过 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>
我正在尝试将我的 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
上查看示例双向绑定也称为 "Banana in a box" 绑定,即 [()].
在您的 AppComponent.html 中,反转括号的顺序以正确绑定
<app-question-group [(primaryValue)]="valueOne"></app-question-group>
终于查到这个了。在显示问题的组件中,我将其作为 @Component
定义的一部分:
viewProviders: [ // This makes the whole child participate in the parent's form validation
{
provide: ControlContainer,
useExisting: NgForm
}
]
我在网上看到说它使子控制器的组件成为父组件的表单验证的一部分。一旦我删除了那个部分,一切就开始正常工作了。
您必须通过 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>