My goal is to display the name property, but store it as the value of _id for the mat-select control. I also want to save the selected option in the selectedIngridient variable.
However, I encountered the following error message:
"Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
Despite researching similar issues (e.g., Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays), I couldn't pinpoint the exact cause of the error.
What could I have done incorrectly?
Stacklitz:
https://stackblitz.com/edit/angular-l6yvgd?file=src/app/app.module.ts
Initialization:
import { Observable } from 'rxjs/internal/Observable';
allIngridients: Observable<Ingridient[]>;
selectedIngridient: Ingridient;
Data Model:
export class Ingridient {
_id: string;
name: string;// todo: Übersetzungen
barCode?: Barcode;
constructor() {
this._id = UUID.UUID();
}
}
HTML Markup:
<mat-form-field>
<mat-select placeholder="Select an ingridient" [(value)]="selectedIngridient">
<mat-option *ngFor="let ingridient of allIngridients" [value]="ingridient._id">
{{ingridient.name}}
</mat-option>
</mat-select>
</mat-form-field>
Populating allIngridients (called in the constructor):
inlineFunction_IngridientsNumberAndUnits_Ingridient(recipeId: string, quantity: number): Ingridient[] {
let result: Ingridient[] = [];
for (let i = 0; i < quantity; i++) {
const ingridient: Ingridient = new Ingridient(recipeId);
// Assign values
ingridient.name = "Unit_" + (i + 1);
ingridient.name = "BarCodes_" + (i + 1);
// Subscription
this.allIngridients.subscribe(current => {
current.push(ingridient);
})
result.push(ingridient);
}
return result;
}