Angular 6 - 只有在点击其他地方后，ngModel的值才会出现

Question

我有一个组件，用于显示一个项目列表。在每个项目上，都有一个下拉菜单，可用于更改值。唯一的问题是，在创建组件时，下拉菜单中选择的项目为空。只有在页面任何位置单击后，它才会出现。

TypeScript

export class Component {

    @Input() files: ProductFile[];

    contentTypes: { [id: string]: string } = {};

    ngOnInit(): void {
        this.files.forEach(f => this.contentTypes[f._id] = f.contentType);
    }

    public fileTypes: string[] = [/* items in the dropdown */];

}

HTML

<div
    *ngFor="let f of files"
    class="file shadow"
>
    <dy-dropdown
        [items]="fileTypes"
        [ngModel]="contentTypes[f._id]"
        (ngModelChange)="onUpdate($event, f)"
    ></dy-dropdown>
</div>

P.S.: dy-dropdown 是一个自定义表单控件，当用户在下拉列表中选择项目时，它会简单地更改值。

- Florian Ludewig

---

你尝试使用选择器而不是自定义表单控件了吗？问题可能就在那里。 - BlackICE

我肯定会尝试上述建议，看看问题是否出在这个控件上，然后再花更多时间去解决它。 - DeborahK

太棒了！我明天会尝试一下，谢谢！ - Florian Ludewig

成功了！现在我得弄清楚下拉框出问题的原因。 - Florian Ludewig

Answer 1

尝试使用ChangeDetectorRef手动调用变更检测。

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){

}

在你的 onUpdate 函数内部调用。

this.chRef.detectChanges();

- Sajeetharan

Answer 2

可能需要手动触发变更检测。以下是代码。

import {ChangeDetectorRef} from '@angular/core';

constructor(private cdr: ChangeDetectorRef)

ngOnInit(): void {
  this.files.forEach(f => this.contentTypes[f._id] = f.contentType);
  this.cdr.detectChanges();
}

- Suresh Kumar Ariya

---

你为什么要再次发布相同的答案？ - Sajeetharan

可能会同时发生，两者可能同时提交。您能否创建 StackBlitz？ - Suresh Kumar Ariya