Me ha surgido una duda para encontrar la mejor vía para solucionar el siguiente caso.
Tengo un componente A que es padre de 2 componentes hijos: el componente app-select que es un select desplegable al que le pasamos sus valores mediante el input "options" y el componente app-cajavalores que se repetirá 5 veces, según el array "items", mediante un bucle ngFor. El template del componente padre básicamente es este:
<div class="card-body">
<app-select (onSelect)="suscribirTopic($event)" [options]="selectables"></app-select>
<app-cajavalores *ngFor="let item of items; let i = index">{{etiquetasLabel[i]}}</app-cajavalores>
</div>
Como podéis ver, estoy usando un segundo array llamado etiquetasLabel que usa el index para dar valor a la etiqueta <label>
de cada componente hijo app-cajavalores.
La pinta que tiene el template del componente app-cajavalores es la siguiente:
<label>
<ng-content></ng-content>
<input type="text" value="--" readOnly="true">
</label>
La duda se presenta en este momento. La mecánica es la siguiente: cuando selecciono un valor de la lista desplegable del primer hijo se dispara el evento suscribirTopic($event) en el padre. Este evento se suscribirá a un topic o cola de mensajes gestionado en un broker de mensajería que comenzará a devolver un stream de valores asíncrono.
Cada mensaje que reciba del stream contendrá un nombre y un valor, el nombre coincidirá con una de las 5 etiquetas <label>
generadas en el bucle y el valor será un número que deberá aparecer en el <input>
asignado a dicho <label>
, pero no se de qué manera puedo identificar estos campos para que cada valor recibido del stream se muestre en su correspondiente <input>
.
No logro visualizar la mejor manera de discriminar el componente app-cajavalores al que enlazar el valor del mensaje recibido ni de qué manera mostrarlo en el <input>
. Entiendo que de alguna manera habría que comprobar que el valor "nombre" recibido en cada mensaje sea igual o no a la etiqueta <label>
de cada componente generado o algo similar...