ngModel bei der Auswahl nicht initial zeigt, Standardwert

Question

Ich habe folgenden Angular Code:

comp.html

<select [(ngModel)]="selectedBanner" (change)="onBannerChange()"> 
        <option *ngFor="let banner of banners" 
        [ngValue]="banner">{{banner.BannerDesc}}</option> 

       </select> 

comp.ts

public banners: any[] = [ 
     {BannerId: 1, BannerDesc: 'AAAA'}, 
     {BannerId: 2, BannerDesc: 'BBBB'}, 
     {BannerId: 3, BannerDesc: 'CCCC'}, 
     {BannerId: 4, BannerDesc: 'DDDD'}, 
    ]; 
    public selectedBanner: any = {BannerId: 3, BannerDesc: 'CCCC'}; 
    onBannerChange() { 
     console.log(this.selectedBanner); 
    } 

jedoch auf Last, die Auswahl Dropdown ist immer leer. Nur wenn ich mich ändere, bekommt es den Wert. Wie kann ich den Standardwert beim Laden einstellen?

Ich bin mit Winkel 4.0.0

Answer 1

Das Problem, mit dem Sie versuchen, den Wert in einem anderen Dienst zu speichern und dann auf diesen Wert beim Laden der App voreinzustellen, ist, dass sie aus angularer Sicht nicht auf das exakt gleiche Objekt zeigen Erinnerung.

Sie müssen Ihre ngOnInit-Methode wie folgt leicht ändern.

1. Finden Sie den Index des Objekts in dem Banner-Array, das Sie basierend auf einem Schlüssel wie BannerId gespeichert haben.
2. Danach können Sie die ausgewählte Option mit demselben this.selectedBanner = this.banners [bannerIdIndex] festlegen.

Auf diese Weise werden Sie in der Liste Winkel zeigt auf das richtige Objekt erhalten können, die Sie in Ihrem ngFor verwenden

Answer 2

Try this:

import { Component, OnInit} from '@angular/core'; 
    public banners: any[]; 

    ngOnInit() { 
    banners = [ 
     {BannerId: 1, BannerDesc: 'AAAA'}, 
     {BannerId: 2, BannerDesc: 'BBBB'}, 
     {BannerId: 3, BannerDesc: 'CCCC'}, 
     {BannerId: 4, BannerDesc: 'DDDD'}, 
    ]; 

} 

Verwenden ngOnInit() aus zwei Hauptgründen:

Um komplexe Initialisierungen durchführen kurz nach dem Bau. Um die Komponente nach Angular einzurichten, werden die Eingabeeigenschaften festgelegt.

Answer 3

Feine Antworten hier, aber nur in diesem zu werfen, wie wir, dass dies herausgefunden selectedBanner wäre eine globale Variable. Sie können es wie Jlee vorgeschlagen, können Sie auch einfach find() verwenden, in dem Sie zuweisen würden (Referenz erstellen), um den Wert aus dem Array basierend auf Ihrem Objekt, so:

ngOnInit() { 
    this.selectedBanner = this.banners.find(x => 
     x.BannerId == this.selectedBanner.BannerId) 
}