[英]Angular 5 default value not default selected
使用ngFor循环创建选项时,未选择ngModel的默认值
HTML:
<form style="margin : 20%;">
<div class="row">
<div class="form-group">
<label for="foo">K1 :{{keyboard | json}}</label>
<select [(ngModel)]="keyboard" name="foo" class="custom-select">
<option *ngFor="let a of foo" [ngValue]="a">{{a.name}}</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="fooz">K2 :{{keyboard2 | json}}</label>
<select [(ngModel)]="keyboard2" name="fooz" class="custom-select">
<option [ngValue]="foo[0]">AZERTY</option>
<option [ngValue]="foo[1]">QWERTY</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="fooa">K2 :{{keyboardStr | json}}</label>
<select [(ngModel)]="keyboardStr" name="fooa" class="custom-select">
<option [selected]="keyboardStr == 'AZERTY'" [ngValue]="AZERTY">AZERTY</option>
<option [selected]="keyboardStr == 'QWERTY'" [ngValue]="QWERTY">QWERTY</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="fooa">K2-bis :{{keyboardStr | json}}</label>
<select [(ngModel)]="keyboardStr" name="fooa" class="custom-select">
<option [selected]="keyboardStr == 'AZERTY'" [value]="AZERTY">AZERTY</option>
<option [selected]="keyboardStr == 'QWERTY'" [value]="QWERTY">QWERTY</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="fooa">K2-ter :{{keyboardStr | json}}</label>
<select [(ngModel)]="keyboardStr" name="fooa" class="custom-select">
<option [selected]="keyboardStr == 'AZERTY'" value="AZERTY">AZERTY</option>
<option [selected]="keyboardStr == 'QWERTY'" value="QWERTY">QWERTY</option>
</select>
</div>
</div>
</form>
零件 :
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
private foo: any[] = [{id: 1, name: "AZERTY"}, {id: 2, name: "QWERTY"}];
private keyboard: any = {id: 1, name: 'AZERTY'};
private keyboard2 : any = {id: 1, name: 'AZERTY'};
private keyboardStr : string = 'AZERTY';
constructor() { }
ngOnInit() {
}
}
结果:
AZERTY不应该默认选择吗?
使用ngModel和ngValue时是否存在冲突? 因为在K1的例子中,值不能用作'a'是对象吗?
编辑:
@Roy D. Porter好的,但想象我有这个'单位'对象:
{
"id": 1,
"type": "REMISE",
"owner": "OWN",
"to": {
"id": 1,
"alone": true,
"level": 1,
"name": "Participant",
"minSales": 0.0,
"minTeamNumber": 0,
"durationCondition": 0,
"durationAwardCondition": null
},
"limit": 0.0,
"percentage": 25.0,
"alone": true
}
这将很好地显示类型,因为model是一个字符串:
<select [(ngModel)]="unit.type" name="tye" class="custom-select">
<option *ngFor="let type of types" [ngValue]="type">{{type | camelCase}}</option>
</select>
这不显示它应该的默认值:{{award.name | 骆驼香烟盒}}
我认为这是因为奖励不是一个字符串。 从我看到的,当它是一个字符串时,选择ngModel,而当它是一个对象时,不选择它。
Angular v5.0.0
我遇到了和你一样的问题。
我通常的解决方案是在列表中添加一个选项,并将其值设置为-1,并将绑定变量初始化为-1。
所以在你的情况下:
<select [(ngModel)]="keyboard" name="foo" class="custom-select">
<option value="-1">Please select an answer</option>
<option *ngFor="let a of foo" [ngValue]="a">{{a.name}}</option>
</select>
在组件控制器中,将keyboard
变量初始化为-1。
当您在选项上使用[ngValue]时,请在选择时使用[compareWith]。 给它一个比较两个对象的函数(在ngValue和ngModel对象的类型中)。
您在此处的文档中有示例: https : //angular.io/api/forms/SelectControlValueAccessor
最好的祝福
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.