Angular 5 select 和带枚举值的默认值

Question

我正在尝试使用 Angular 5 在 select 选项中设置默认值。我读过 [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' 块是 true。 select 下拉列表中的预编辑值是 SSL，尽管我已经设置了 NONE 在 onInit 方法。您知道为什么会这样吗？我应该怎么做才能 select 正确的值？

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

{
  "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;
}

但是虽然默认的 selection 在我们从 onInit 方法设置它时工作正常，但当它从服务器返回时却没有。我怀疑原因是它是一个字符串。我应该将它转换为枚举值吗？做这个的最好方式是什么？

提前谢谢你，

Answer 1

将以下属性添加到组件的脚本中：

encryptionProtocolValues = EncryptionProtocol;

然后在HTML这边，这样做：

<option *ngFor="let encryptionProtocol of encryptionProtocolKeys()" 
  [ngValue]="encryptionProtocolValues[encryptionProtocol]">
    {{encryptionProtocol}}
</option>

解释：当你定义一个只有键的枚举时，你定义的名字就是那个，键。但在幕后，它们的实际隐含值是 0、1、2 等，您可以通过 EnumTypeName[EnumKey].

访问这些值

请注意，您可以使用 [value] 而不是 [ngValue]。我相信至少对最近的 Angular 版本来说是正确的做法。

Answer 2

<option *ngFor="let encryptionProtocol of encryptionProtocolKeys()" 
  [ngValue]="encryptionProtocolValues[encryptionProtocol]" [value]="encryptionProtocol">
    {{encryptionProtocol}}
</option>

感谢您的 post...它帮助了我很多...我唯一要添加到答案中的是对值 [value]="encryptionProtocol" 的绑定。 .. 这将保留用户选择的选项。

Angular 5 select 和带枚举值的默认值

Angular 5 select and default value with enum values

select

enumeration

default-value

drop-down-menu

angular