我试图在Angular 5的选择选项中设置一个默认值。我已经阅读了[compareWith]但它似乎没有帮助。这是代码:
我的枚举:
export enum EncryptionProtocol {
NONE,
SSL,
TLS }
我的配置模型
export class Config implements BaseEntity {
constructor(
public id?: number,
...
public encryptionProtocol?: EncryptionProtocol,
...
) {
}
}
我的HTML:
<div class="form-group">
<label class="form-control-label" for="field_encryptionProtocol">Encryption Protocol</label>
<select [compareWith]="compareFn" class="form-control" name="encryptionProtocol" [(ngModel)]="config.encryptionProtocol"
id="field_encryptionProtocol">
<option *ngFor="let encryptionProtocol of encryptionProtocolKeys()" [ngValue]="encryptionProtocol">
{{encryptionProtocol}}
</option>
</select>
</div>
编辑:我的TS:
...
encryptionProtocols = EncryptionProtocol;
encryptionProtocolKeys() : Array<string> {
var keys = Object.keys(this.encryptionProtocols);
return keys.slice(keys.length / 2);
}
...
compareFn(c1: EncryptionProtocol, c2: EncryptionProtocol): boolean {
console.log('compare function');
console.log(c1);
console.log(c2);
console.log(c1 && c2 ? c1.valueOf() === c2.valueOf() : c1 === c2);
return c1 && c2 ? c1.valueOf() === c2.valueOf() : c1 === c2;
}
...
ngOnInit() {
this.config = {encryptionProtocol: EncryptionProtocol.NONE, headers: []};
}
并且控制台的输出是:
compare function
NONE
undefined
false
compare function
NONE
undefined
false
compare function
SSL
undefined
false
compare function
NONE
undefined
false
compare function
SSL
undefined
false
compare function
TLS
undefined
false
{encryptionProtocol: 0, headers: Array(0)}
0
compare function
NONE
null
false
compare function
SSL
null
false
compare function
TLS
null
false
compare function
NONE
0
false
compare function
SSL
0
false
compare function
TLS
0
false
compare function
NONE
SSL
false
compare function
SSL
SSL
true
你会注意到最后一个'compare function'块是真的。虽然我已经在onInit方法中设置了NONE,但下拉列表中预先选择的值是SSL。你知道为什么会这样,我该怎么做才能选择正确的价值?
更新:这是服务器的响应:
{
"id" : 50000,
...
"encryptionProtocol" : "SSL",
"keystoreType" : "PKCS12",
...
}
这是将此对象分配给模型的代码:
private subscribeToSaveResponse(result: Observable<HttpResponse<Config>>) {
result.subscribe((res: HttpResponse<Config>) =>
this.onSaveSuccess(res.body), (res: HttpErrorResponse) => this.onSaveError());
}
private onSaveSuccess(config: Config) {
this.isSaving = false;
this.config = config;
}
但是当我们从onInit方法设置它时,默认选择正常,但是当它从服务器返回时它不会。我怀疑原因是它是一个字符串。我应该将其转换为枚举值吗?做这个的最好方式是什么?
先感谢您,
将以下属性添加到组件的脚本中:
encryptionProtocolValues = EncryptionProtocol;
然后在HTML端,执行以下操作:
<option *ngFor="let encryptionProtocol of encryptionProtocolKeys()"
[ngValue]="encryptionProtocolValues[encryptionProtocol]">
{{encryptionProtocol}}
</option>
说明:当您定义仅包含键的枚举时,您定义的名称是键,键。但是在幕后他们的实际隐含值是0,1,2等,你可以通过EnumTypeName[EnumKey]
访问。
请注意,您可以使用[value]
而不是[ngValue]
。我认为至少对最近的Angular版本来说是正确的。
<option *ngFor="let encryptionProtocol of encryptionProtocolKeys()"
[ngValue]="encryptionProtocolValues[encryptionProtocol]" [value]="encryptionProtocol">
{{encryptionProtocol}}
</option>
谢谢你的帖子...它帮了我很多...我唯一想补充的是绑定到值[value] =“加密协议”...这将保留用户选择的选项。