ngModel funktioniert nicht in Auswahloptionen innerhalb einer for-Schleife

Question

Ich versuche, Optionen in einem HTML-Select innerhalb einer for-Schleife hinzuzufügen. Um die gewählte Option zu erhalten, verwende ich [(ngModel)], aber standardmäßig ist keine Option ausgewählt.

Beispielcode:

<table align="center"> 
    <tr *ngFor="let d of data; let i = index"> 
     <td> 
      <select id="status" [(ngModel)]="d.status" name="d.status" (change)="onStatusChange(i, d.id)"> 
      <option *ngFor="let o of statusArray" [ngValue]="o">{{o.name}}</option> 
      </select> 
     </td> 
    </tr> 
</table> 

Dies ist die Komponente, die ich verwende:

export class AboutComponent implements OnInit { 
    statusArray; 
    data; 

    constructor() { } 

    ngOnInit() { 
    this.statusArray = [ 
     { 
      "id": 1, 
      "name": "Testing" 
     }, 
     { 
      "id": 2, 
      "name": "Free Trial" 
     }, 
     { 
      "id": 3, 
      "name": "Active/Paying" 
     } 
    ]; 

    this.data = [ 
     { 
      "id": 2, 
      "status": { 
       "id": 1, 
       "name": "Testing" 
      }, 
      "new": false 
     }, 
     { 
      "id": 3, 
      "status": { 
       "id": 1, 
       "name": "Testing" 
      }, 
      "new": false 
     }, 
     { 
      "id": 4, 
      "status": { 
       "id": 2, 
       "name": "Free Trial" 
      }, 
      "new": false 
     } 
    ]; 
    } 

} 

Ausgang:

Hier in der Ausgabe i die Optionen in der Liste bin immer aber Standard Wert ist nicht ausgewählt:

Answer 1

Versuchen Sie, diese zu ersetzen:

<option *ngFor="let o of statusArray" [ngValue]="o">{{o.name}}</option> 

mit:

<option *ngFor="let o of statusArray" [ngValue]="o.id">{{o.name}}</option> 

o ist ein Array, so existiert kein Wert für Ihre Wahl.

Answer 2

Sie können es standardmäßig unter Verwendung von:

[(ngModel)]="d.status" 

stellen Sie den Standardwert in d.status, die Sie festlegen möchten.

Answer 3

Sie Optionen vergleichen compareWith Eigenschaft wählen, wenn Sie Winkel verwenden 4.

HTML Datei:

<select [compareWith]="byAnimal" [(ngModel)]="selectedAnimal"> 
    <option *ngFor="let animal of animals" [ngValue]="animal"> 
    {{animal.type}} 
    </option> 
</select> 

TS

byAnimal(item1,item2){ 
    return item1.type == item2.type; 
} 

eines der Datei beste Lösung von diesem link