我有 2 个数组,其中 1 个数组值绑定(bind)到选择下拉值。 在清除另一个数组时,我只想渲染一个选项。 代码如下:
组件
@Component({
selector: 'my-app',
templateUrl : 'app/app.html'
})
export class AppComponent {
arrToClear = [1,2,3,4];
arrToBind = ["NONE", "SOME", "OTHER"];
modelToBind = 'NONE';
}
查看
<小时/>MODEL -> {{modelToBind}}
<button type='button'(click)="arrToClear.length = 0; modelToBind = 'NONE'">Clear Array </button>
<select class="form-control"
id="someId"
name="someName"
[ngModel]="modelToBind"
#someName="ngModel"
>
<ng-container *ngIf="arrToClear.length">
<option *ngFor="let data of arrToBind"
[ngValue]="data"> {{data}}
</option>
</ng-container>
<option value="NONE" *ngIf="!arrToClear.length">
Value
</option>
</select>
问题是,当我清除“arrToClearArr”数组时,我选择的值为空。它应该绑定(bind)到“A”,因为我的模型包含“A”。
此外,我只想要单向绑定(bind),因此我使用了 [ngModel]。
我在这里缺少什么?任何帮助将不胜感激。 谢谢。
<小时/>预期行为:
- 更改下拉值
- 点击“清除阵列”按钮
- 下拉值应为“A”,目前为“”
最佳答案
这是可选的,但就我个人而言,我不会使用 [ngModel]
并尝试使用模板驱动的表单来解决此问题,因为我相信直接绑定(bind)变量会更清晰。就像您一样用 for 循环做了。
<select class="form-control" id="someId" formControlName="someName" name="someName">
<ng-container *ngIf="arrToClear.length">
<option *ngFor="let data of arrToBind" [value]="data"> {{data}}</option>
</ng-container>
<option [value]="modelToBind" *ngIf="!arrToClear.length">{{modelToBind}</option>
</select>
或者,您可以不保持所有内容相同,只编辑最后一个选项。
<select class="form-control" id="someId" [ngModel]="modelToBind" #someName="ngModel" name="someName">
<ng-container *ngIf="arrToClear.length">
<option *ngFor="let data of arrToBind" [ngValue]="data"> {{data}}</option>
</ng-container>
<option [value]="modelToBind" *ngIf="!arrToClear.length">{{modelToBind}</option>
</select>
关于javascript - Angular 2 Html 选择模型与选项值不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44669971/