bucle de opción de selección en myComponent.html:
<select class="form-select" (change)="selectOption($event)"> <option *ngFor="let entity of entities; let i = index" value="{{entity.id}}" [selected]="i == 0 ? true : null" (onload)="fooFunction(i, entity.id)">{{entity.name}} </option> </select>y la función myComponent.ts:
fooFunction(i: number, entityId: number){ console.log(`${i} - ${entityId}`); } Quiero pasar variables para que funcionen mientras relleno las opciones. Intenté load , onload , onSelect , etc.
¿Cómo puedo lograr esto en angular13 ?
Su selectOption($event) podría reflejar eso al pasar sus variables en una matriz al cambiar.
En TS
@Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { entities = [ { id: 1, name: 'hello' }, { id: 2, name: 'test' }, ]; selectOption(event: any) { const arr = event.target.value.split(','); console.log(arr[0]); //id console.log(arr[1]); //index } }html
<select class="form-select" (change)="selectOption($event)"> <option *ngFor="let entity of entities; let i = index" [value]="[entity.id, i]"> {{ entity.name }} </option> </select>Ejemplo de trabajo: https://stackblitz.com/edit/angular-ivy-qzdsfl?file=src%2Fapp%2Fapp.component.ts
Tienes que usar ngModel
<select class="form-select" [(ngModel)]="selectedValue"> <option *ngFor="let entity of entities; let i = index" [ngValue]="entity.id">{{entity.name}} </option> </select>