typescript - angular: no se puede vincular dinámicamente un conjunto de valores de opción a un elemento de un menú desplegable mientras se recorre un array (*ngFor)

Itero sobre un arreglo usando *ngFor para crear tantas tarjetas como haya en el arreglo.
Cada tarjeta debe venir con una opción específica en el menú desplegable (ng-select). Y al hacer clic o seleccionar esta opción, se debe renderizar dinámicamente una lista de opciones disponibles. Cada lista de opciones está vinculada de manera única a una tarjeta, de ahí la lógica de switch en mi plantilla .ts.

modal-view.component.html

<div class="card text-center" *ngFor="let alarm of alarms">
    <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" class="col-xl-12">
      <select 
        class="form-control" 
        id="option" required 
        [(ngModel)]="form.option" 
        name="option" #option="ngModel" 
        (click)="getSensorDesc(alarm)"
        >
          <option value="" selected disabled>Seleziona Giustificativo:</option>
          <option *ngFor="let option of options" [ngValue]="option.value">{{ option.text }}</option>
      </select>
      <button type="submit" class="btn btn-danger btn-xs mt-1 col-xl-12" [disabled]="!f.form.valid">
          Referta
      </button>
    </form>
</div>

Al principio, el select está lleno de nada (en su lugar quiero la opción deshabilitada sin valor, como un marcador de posición), pero cuando elijo una opción, esa opción se envía a todos los otros select. ¿Cómo puedo solucionar este problema??

modal-view.component.ts Si hay alguna otra solución para renderizar opciones dinámicamente en el select, por favor házmelo saber

export class ModalViewComponent implements OnInit {

 options = [
  { value: 'Falso allarme', text: 'Falso allarme' },
 ];
 
 getSensorDesc(alarm: Alarm) {
   switch (alarm.sensor.type) {
    case 'lidardx':
     this.options.splice(1, 1, { value: 'Tentativo di alzata dx', text: 'Tentativo di alzarsi dal letto dx' });
      break;
    case 'lidarSx':
      this.options.splice(1, 1, { value: 'Tentativo di alzata sx', text: 'Tentativo di alzarsi dal letto sx' });
      break;
    case 'peso':
      this.options.splice(1, 1, { value: 'Fuori dal letto', text: 'Fuori dal letto' });
      break;
    case 'rumore':
      this.options.splice(1, 1, { value: 'Urla inascoltate', text: 'Urla inascoltate' });
      break;
    default:
      break;
} }

Respuesta #1

O.K. esto no es lo que pediste. Básicamente quieres hacer para cada alarma un nuevo formulario. Este es un enfoque diferente (que escribí en un editor de texto, así que revisa por ,;(){}"), pero creo que esto podría ajustarse a tus necesidades. Para ser honesto, no es fácil entender tu explicación.

archivo ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
    selector: 'alarm',
    templateUrl: './alarm.component.html',
    styleUrls: ['./alarm.component.scss']
})

export class AlarmComponent implements OnInit {
alarmForm: FormGroup;
options = [
  { value: 'Falso allarme', text: 'Falso allarme' },
 ];
alarms: Alarm[];

constructor(
        private formBuilder: FormBuilder
    ) {}

ngOnInit(): void {
            this.initializeForm();
        }

    initializeForm() {
        this.alarmForm = this.formBuilder.group({

            alarm: ['', [Validators.required]]
            alarmoptions: ['', [Validators.required]]

        });

onAlarmChange(value: Alarm) {
// I would put here the switch-logic
switch (value.sensor.type) {
    case 'lidardx':
     this.options.splice(1, 1, { value: 'Tentativo di alzata dx', text: 'Tentativo di alzarsi dal letto dx' });
      break;
    case 'lidarSx':
      this.options.splice(1, 1, { value: 'Tentativo di alzata sx', text: 'Tentativo di alzarsi dal letto sx' });
      break;
    case 'peso':
      this.options.splice(1, 1, { value: 'Fuori dal letto', text: 'Fuori dal letto' });
      break;
    case 'rumore':
      this.options.splice(1, 1, { value: 'Urla inascoltate', text: 'Urla inascoltate' });
      break;
    default:
      break;

}

archivo HTML

<div class="card text-center"> 
    <form [formGroup]="alarmForm" (ngSubmit)="onSubmit()" class="col-xl-12">
<ng-select [items]="alarms" bindValue="?" bindLabel="?" formControlName="alarm" (change)="onAlarmChange($event)"> </ng-select>
<ng-select [items]="options" bindValue="value" bindLabel="text" formControlName="alarmoptions”> </ng-select>
<button class="btn btn-primary" type="submit" [disabled]="!alarmForm.valid">referta</button> 
<!-- (better validation in ts and use a specific boolean to switch on/off the button) -->
    </form>
</div>

Cuídate y buena suerte. Hazme saber tus comentarios, ideas y tal vez pueda ayudar de alguna otra manera.