typescript - Angular 6 - Verdien av ngModel vises bare når du klikker et sted

Jeg har en komponent som viser en liste med elementer. På hvert element er det en rullegardinmeny hvor du kan endre en verdi. Det eneste problemet er at når jeg oppretter komponenten, er det valgte elementet i rullegardinmenyen tomt. Det vises først hvis jeg klikker hvor som helst på siden.

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 er en egendefinert skjema-kontroll som rett og slett endrer verdien når brukeren velger et element i rullegardinlisten.

Svar #1

Prøv å kalle på endringer i deteksjon manuelt ved å bruke ChangeDetectorRef

import { ChangeDetectorRef } from 'angular/core';

constructor(private chRef: ChangeDetectorRef){

}

og kall inne i din onUpdate-funksjon

this.chRef.detectChanges();

Svar #2

Det kan være, du må utløse endringsdeteksjon manuelt. Her er koden.

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

constructor(private cdr: ChangeDetectorRef)

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