使用Angular8 compareWith和setValue设置下拉菜单中的所选项目，在chrome 83中无法使用 [英] Using Angular8 compareWith and form setValue to set selected item in a dropdown menu, couldn't work in chrome 83

问题描述

我正在尝试使用角度compareWith设置下拉列表中的选定项目.但是，它不能很好地工作.下拉菜单仍然是空白.这是我的代码:我在 stackblitz 上创建了一个演示，我发现它在FireFox和Safari上显示得很好，但不适用于Chrome 83

I am trying to set a selected item in a dropdown list using angular compareWith. However, it doesn't work well. The dropdown menu is still a blank. Here is my code: I created a demo at stackblitz I found it shows well on FireFox and Safari, but not for Chrome 83

<select class="custom-select w-100 form-control 
    (change)="changeTitle(time2TrackForm.value.title)" 
    formControlName="title"  
    [compareWith]="compareFn">
    <option [ngValue]="''">
        <b>Select</b>
    </option>
    <option *ngFor="let title of subsectionTitles" 
        [ngValue]="title" id="selectedItem">
        <b>{{title}}</b>
    </option>
</select>

component.ts:

component.ts:

ngOnInit () {
    this.myForm = this.fb.group(this._formModel());
    this._getIntegrations(); // make a call to fetch the data
}

private _formmModel() {
    return {
        title: ['', [Validators.required]],
        actions: this.fb.array([],[Validators.required]),
        source: ['', [Validators.required]],
    };
}

private _getIntegrations(): void {
    this.service
        .getData(id).pipe(
        .subscribe((data: any) => {
            this.list = data;
            //  can successfully get the data here for sure
            (this.mode === 'Edit') && this._setCollection();
    });
}

private _setCollection(): void {
    this.time2TrackForm.get('title').setValue('Test Title'); 
    this.subsectionTitles = this.list.titles;
    console.log(this.subsectionTitles) // ['Test Title']
    this.spinnerForData = false;
}

compareFn(val1: string, val2: string) {
    console.log(val1 === val2) // eventally return true
    return (val1 && val2) && val1 === val2;
};

我正在使用 Chrome 83 .并引用此 Formbuilder setvalue()在下拉选择中使用时无法达到预期的效果，但仍然没有运气.不知道为什么以这种方式，下拉列表仍然空白，但是我发现该项目已被选中.有人经历过吗?非常感谢

I am using Chrome 83. And refers to this Formbuilder setvalue() is not working as expected when used on dropdown selects way, but still couldn't get any luck. No idea why in this such way, the dropdown list is still blank, but I found the item has been selected. Does anyone experience this? Many thanks

推荐答案

确实，Chrome 83问题很奇怪.您可以解决是否将setValue包含在setTimeout中，但是，对于我来说，如果我找到告诉我的原因:(

Really it's strange the Chrome 83 problem. You can solve if you enclosed the setValue in a setTimeout, but, for me have no logic, if I found the reason I tell you :(

this.subsectionTitles = this.list.titles;
setTimeout(()=>{
  this.time2TrackForm.get("title").setValue(this.inputTitle);
})

这篇关于使用Angular8 compareWith和setValue设置下拉菜单中的所选项目，在chrome 83中无法使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！