gpt4 book ai didi

具有枚举值的 Angular 5 选择和默认值

转载 作者:行者123 更新时间:2023-12-02 17:10:57 25 4
gpt4 key购买 nike

我正在尝试使用 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' block 是true。下拉列表中的预选值是 SSL 尽管我在 onInit 中设置了 NONE方法。您知道为什么会这样吗?我应该怎么做才能选择正确的值?

更新:这是服务器的响应:

{
"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 版本来说这是正确的做法。

关于具有枚举值的 Angular 5 选择和默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49321180/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com