我有一个组件,用于显示一个项目列表。在每个项目上,都有一个下拉菜单,可用于更改值。唯一的问题是,在创建组件时,下拉菜单中选择的项目为空。只有在页面任何位置单击后,它才会出现。
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
是一个自定义表单控件,当用户在下拉列表中选择项目时,它会简单地更改值。