Tengo una matriz de objetos desde los cuales renderizo una selección. El problema es que la selección predeterminada es el segundo objeto (que ni siquiera debería ser seleccionable, solo se usa como una etiqueta de categoría) en la matriz warehouseSelect (por lo que también intenté usar el método unshift).

¿Qué poseería Angular para recurrir a tal comportamiento?

HTML angular

 <select [disableControl]="allDisabled" class="form-control" id="warehouse_id" formControlName="warehouse_id" tooltip="Select a warehouse" data-placement="top"> <option *ngFor="let warehouse of warehouseSelect" [disabled]="warehouse.id == null" [selected]="orderform.controls['warehouse_id'].value == warehouse.id" [ngValue]='warehouse.id' id="{{warehouse.id}}">{{warehouse.name}}</option> </select>

Mecanografiado

 constructor( private warehouseService: WarehouseService, ) { this.warehouseService.getWarehouses(this.selectedOrganization.organization_id) .subscribe((warehouses) => { warehouses.forEach(warehouse => { if (!this.purposesWarehouses[warehouse.purpose]) { this.purposesWarehouses[warehouse.purpose] = []; } this.purposesWarehouses[warehouse.purpose].push(warehouse); this.warehouses.push(warehouse); }); for (let purpose in this.purposesWarehouses) { this.warehouseSelect.push({ id: null, name: purpose }); for (let warehouse in this.purposesWarehouses[purpose]) { this.warehouseSelect.push(this.purposesWarehouses[purpose][warehouse]); } } this.warehouseSelect.unshift({ id: -1, name: 'Auto', }); }); }