es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Botón Radio de Angular / Typescript con dos modelos

16 Jun, 2023 Programación

No sé cómo expresar mi problema, quizás por eso no puedo encontrar una solución.

Tengo un ngFor pero necesito enlazar otra lista de datos para mostrar las opciones seleccionadas:

Tengo una lista de héroes:

[
     {id: 1, nombre:'Superman'},
     {id: 2, nombre:'Batman'},
     {id: 5, nombre:'BatGirl'},
     {id: 3, nombre:'Robin'},
     {id: 4, nombre:'Flash'}
];

Luego muestro una lista de selección de la siguiente manera:

<div class="form-check" *ngfor="let p of heroes">
   <input class="form-check-input" type="checkbox" value="{{p.id}}" id="{{p.id}}">
   <label class="form-check-label" for="{{p.id}}">
     {{p.nombre}}
   </label>
</div>

Luego tengo la persona con sus superhéroes favoritos en otra lista:

{id: 1, nombre: 'Jack', superhéroesFavoritos: [{id: "1"}, {id: "2"}]}

¿Cómo obtengo los datos para enlazarlos con los cuadros de selección?

Aquí es donde estoy trabajando en ello: https://stackblitz.com/edit/angular-ivy-muaxwi?file=src/app/app.component.html

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para vincular las casillas de verificación con los héroes seleccionados de la lista de personas, puede utilizar la directiva ngModel y verificar si el ID del héroe está incluido en el array favoriteSuperHeroes de la persona.

    En primer lugar, modifique su etiqueta de entrada para utilizar ngModel y vincularla a una propiedad en el componente:

    <input class="form-check-input" type="checkbox" [value]="p.id" [id]="p.id" [(ngmodel)]="isChecked(p.id)">

    En este caso, estamos vinculando el valor de la casilla de verificación a p.id, y utilizando [(ngModel)] para vincular el estado de la casilla de verificación a la función isChecked del componente.

    A continuación, en la clase del componente, agregue la función isChecked que toma el id del héroe y verifica si está incluido en el array favoriteSuperHeroes de la persona:

    export class AppComponent {
  heroes = [
    { id: 1, name: 'Superman' },
    { id: 2, name: 'Batman' },
    { id: 5, name: 'BatGirl' },
    { id: 3, name: 'Robin' },
    { id: 4, name: 'Flash' }
  ];

  person = { id: 1, name: 'Jack', favoriteSuperHeroes: [{ id: '1' }, { id: '2' }] };

  isChecked(heroId: number): boolean {
    return this.person.favoriteSuperHeroes.some(hero => hero.id === heroId.toString());
  }
}

    Aquí, la función isChecked toma el heroId como parámetro, y verifica si ese id existe en el array favoriteSuperHeroes utilizando el método some. Si el heroId existe en el array, isChecked devuelve true, y la casilla de verificación está seleccionada.

    Por último, puede utilizar la función isChecked en la directiva ngIf para mostrar únicamente los héroes seleccionados de la lista de la persona:

    <div class="form-check" *ngfor="let p of heroes">
  <input class="form-check-input" type="checkbox" [value]="p.id" [id]="p.id" [(ngmodel)]="isChecked(p.id)">
  <label class="form-check-label" for="{{p.id}}">
    {{p.name}}
  </label>
  <span *ngif="isChecked(p.id)">✅</span>
</div>

    En este código, utilizamos *ngIf para mostrar el nombre del héroe seguido de una marca de verificación si la casilla de verificación está seleccionada (es decir, si isChecked(p.id) devuelve true). De lo contrario, la marca de verificación no se muestra.

    También puede encontrar el código actualizado en https://stackblitz.com/edit/angular-ivy-jes7ac?file=src/app/app.component.html.

Comments are closed.