使用Angular8 compareWith和form setValue在下拉菜单中设置所选项目，可以'；我不能在铬83上工作

我正在尝试使用角度比较设置下拉列表中的选定项。然而，它并不能很好地工作。下拉菜单仍然是空白的。这是我的代码：我在上创建了一个演示，我发现它在FireFox和Safari上显示得很好，但在Chrome83上没有

<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>

---

我正在使用Chrome 83。并指这种方式，但仍然无法得到任何运气。不知道为什么这样，下拉列表仍然是空的，但我发现该项目已被选中。有人经历过这种情况吗？非常感谢

真的很奇怪Chrome 83的问题。如果将setValue包含在setTimeout中，则可以解决此问题，但是，对于我来说，没有逻辑，如果我找到原因，我会告诉您：(

---

你能创建stackblitz吗？如果你的选择选项是字符串或数字，你不需要使用compareWith-只有当选项的[ngValue]是“对象”时才需要。如果函数_setCollection未执行，请考虑您的

this.subsectionTitles

没有值，例如，

this.mode！==“Edit”

。您在控制台中有任何错误吗？Hi@Chellappanவ 我在上创建了一个：我注意到Firefox和Safari显示得很好，但Chrome 34不太好Hi@Eliseo，非常感谢。我在上创建了一个类似的：它在Firefox和Safari上运行得很好，但在Chrome 34上运行得不好，请你看一下，让我知道我做的是错的。非常感谢Chrome 34的问题真的很奇怪。我回答一个变通方法，但我找不到原因这太棒了！看起来它工作得很好。我发现如果this.list.titles有两个元素，它将显示最上面的元素。例如：this.list.titles=['Test1'，'Test2'，]，如果选择的项是'Test1'，它将显示'Test1'，但不会显示'Test2'。因此，我几乎像['Test1'，''一样操纵dom，这使最后一项隐藏在页面上，但您的解决方案肯定要好得多。如果可以，您能告诉我，为什么您认为settimeout（）可以解决这个问题吗？无论如何，非常感谢！这真的帮了我很大的忙！！“settimeout（）”让我喘口气（这就像你对Angular说：‘嘿，做所有的动作，在重新绘制应用程序后，记住你需要再做一次说明），所以首先填写select，然后给出值。当我们给出值时，“选项”已填充，选择显示选项。但我不知道Mozilla workHi@Eliseo的原因是什么，这会产生场景！非常感谢！

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

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