Para mi solución primero cree una variable de tipo type para los estados dentro de la interface de user y esta se la aplique como tipo de variable a la propiedad state de la siguiente manera
Esta solución permite a Visual Studio agregar ayudas a la hora de programar y evita que ocurran typos en tu código
Finalmente en el html solo agregue la imagen utilizando el binding de angular con la direccion de las imagenes
Me parece una buena solución, lo único que puede mejorarse es pasarle una class status en vez del ID ya que se repite varias veces. Con eso ponemos en la css el tamaño de la imagen
Muy buena propuesta de solución al reto.
Agregamos un nuevo campo de status a la inerface
exportinterfaceUser{//"?" indica si es opcionalnick: string; subnick?: string; age?: number;email: string;friend: boolean;uid: any;status: string;}
Luego a cada usuario le asignamos su corespondiente status:
Finalmente se integra a la vista en el home.componen.html
<br /><input type="text" placeholder="Buscar Amigo"[(ngModel)]="query"><br /><b>Amigos</b><ng-container *ngFor="let user of friends | search:query; let i = index"><div><img class="icon-status" src="../../assets/img/logo_live_{{user.status}}.png"/><a routerLink="/conversation/{{user.uid}}">{{i}}.{{user.nick}}-{{user.email}}</a></div></ng-container>
Resultado
La verdad, nunca habia trabajado con enum tengo problemas con el enum en la clase donde se encuentra interface user con el atributo de status, ya que coloco "online", Online y nada me coge. ¿Como lo resuelvo compañero.?
Realice los status con números ,lo mas sencillo posible
<a routerLink="/conversation/{{user.uid}}"><img id="main-logo" src="assets/img/logo_live_offline.png" alt="Logo de platzinger" width="20px" height="20px">{{i}}.{{user.nick}}-{{user.email}}</a>
</ng-container>
<ng-container *ngIf=“user.status==3”>
<a routerLink="/conversation/{{user.uid}}"><img id="main-logo" src="assets/img/logo_live_busy.png" alt="Logo de platzinger" width="20px" height="20px">{{i}}.{{user.nick}}-{{user.email}}</a>
</ng-container>
<ng-container *ngIf=“user.status==4”>
<a routerLink="/conversation/{{user.uid}}"><img id="main-logo" src="assets/img/logo_live_away.png" alt="Logo de platzinger" width="20px" height="20px">{{i}}.{{user.nick}}-{{user.email}}</a>
</ng-container>
poner un id en cada usuario para saber su status y dependiendo a cada id, mostrar el icono correspondiente
Se propone crear un Enum con los estados del usuario, agregar este atributo al usuario, luego en el controlador de la vista crear un map para cada estado con su url y un método para facilitar a la vista la búsqueda del recurso.
Model
export enum UserState {
ONLINE='online',
OFFLINE='offline',
BUSY='busy',
AWAY='away'
}
export interface User {
nick: string;
subnick?: string;
age?: number;
email: string;
friend: boolean;
uid: any;
state:UserState;
}
<div *ngFor='let user of friends | search:query; let i=index;'>
<a routerLink="/conversation/{{user.uid}}">{{i}}. {{user.nick}} - {{user.email}}</a>
<img id="{{'logo-live-'+user.state}}" class= 'logo-live-user-state' src='{{getUrlOfIconByUserState(user.state)}}' />
</div>
<!-- otras lineas-->
Estilo:
home.component.css
.logo-live-user-state{
width: 24px;
}
La idea del enum está muy buena :thumbsup:
Y sacar la url con un método también me parece que deja todo más limpio, solo ajustaría el nombre del método de getUrlOfIconByUserState a getIconUrlByUserState
El único detalle es que llamarle "controlador" al componente sí suena un poco anticuado :thinking:
Bueno aproveche que el nombre de las imágenes solo cambia en el estado y la extensión de las imágenes es la misma para todas y deje que el status modifique el atributo src de mi etiqueta <img> asi:
<img class=“statusIcon” src="./assets/img/logo_live_{{usr.status}}.png" alt="">
y tengo este resultado
Poner un estado al usuario e interpolarlo en la ruta de la imagen <img id=“status” src=“assets/img/logo_live_{{user.state}}.png” alt=“status”>
<input type="text" placeholder="Buscar Amigo"[(ngModel)]="query"/><br/><b>Amigos</b><ng-container *ngFor="let user of friends | search: query; let i = index"><div><img class="ico-estatus" src="assets/img/logo_live_{{user.status}}.png" alt="Estatus de Contacto"/><a routerLink="/conversation/{{user.uid}}">{{i +1}}.{{user.nick}}-{{user.email}}</a></div></ng-container>
No pude aplicar el NgIf por estado, agregue al interface una variable online : boolean.
Con ese parámetro intenté obtener los online/offline desde el formulario pero da error:
<ng-container *ngIf="user.online=='true'">
Ahora tengo dudas en que caso utilizar NgIf o un pipe… Me ayudan ?.
solucione lo del online/offline usando dos container ngIf user.online y otro negado ngIf !user.online
Ahi obtuve los online y Offline, ahora no se como comparar Strings existe NgIf=“user.status==’'away” o debo recurrir unicamente a un pipe?
solucionado!!!
Mi solución es algo así.
<input type="text" placeholder="Buscar Amigo"[(ngModel)]="query"/><br /><b>Amigos</b><ng-container *ngFor="let user of friends | search: query; let i = index"><div><a routerLink="/conversation/{{user.uid}}"><img id="main-logo" src="assets/img/logo_live_busy.png" alt="busy"*ngIf="i===0"><img id="main-logo" src="assets/img/logo_live_away.png" alt="away"*ngIf="i===1"><img id="main-logo" src="assets/img/logo_live_offline.png" alt="busy"*ngIf="i===2"><img id="main-logo" src="assets/img/logo_live_online.png" alt="busy"*ngIf="i===3"><img id="main-logo" src="assets/img/logo_live_online.png" alt="busy"*ngIf="i===4">{{i}}.{{user.nick}}-{{user.email}}</a></div></ng-container>
Hola mi solucion fue con un ngSwitch para cada uno de los datos
<<br /><input type="text" placeholder="Buscar Amigo"[(ngModel)]="query"/><br /><b>Amigos</b><ng-container *ngFor="let user of friends | search:query; let i=index"><div [ngSwitch]="user.estado"><p *ngSwitchCase="'C'"><img id="logo-online" src="assets/img/logo_live_online.png" alt="Logo Conectado"><a routerLink="/conversation/{{user.uid}}">{{i}}.{{user.nick}}-{{user.email}}</a></p><p *ngSwitchCase="'N'"><img id="logo-offline" src="assets/img/logo_live_offline.png" alt="Logo No Conectado"><a routerLink="/conversation/{{user.uid}}">{{i}}.{{user.nick}}-{{user.email}}</a></p><p *ngSwitchCase="'O'"><img id="logo-busy" src="assets/img/logo_live_busy.png" alt="Logo Ocupado"><a routerLink="/conversation/{{user.uid}}">{{i}}.{{user.nick}}-{{user.email}}</a></p><p *ngSwitchCase="'I'"><img id="logo-away" src="assets/img/logo_live_away.png" alt="Logo Espera"><a routerLink="/conversation/{{user.uid}}">{{i}}.{{user.nick}}-{{user.email}}</a></p></div></ng-container>>
cada user tiene un estado con valores
C-> conectado
N-> desconectado
O-> Ocupado
I-> en espera (Inactivo)
El resultado.
luego verifique como lo hicieron lo demás usuario y fue idéntico
Así lo resolví, no se si sea lo óptimo, pero funcionó!
<ng-container *ngFor="let user of friends | search: query; let i = index"><div><img *ngIf="user.status == 'online'"class="user-status-icon" src="assets/img/logo_live_online.png" alt=""><img *ngIf="user.status == 'offline'"class="user-status-icon" src="assets/img/logo_live_offline.png" alt=""><img *ngIf="user.status == 'busy'"class="user-status-icon" src="assets/img/logo_live_busy.png" alt=""><img *ngIf="user.status == 'away'"class="user-status-icon" src="assets/img/logo_live_away.png" alt=""><a routerLink="conversation/user.nick">{{ i+1}}{{ user.nick}}-{{ user.email}}</a></div></ng-container>
se creo uncampo el Object User: statusIcono?: string;
se agrego en el servicio el nuevo campo y se implemento el html la siguiente linea: <img class='img_icono' src='assets/img/logo_live_{{user.statusIcono}}.png'>
En User.service.ts agregue un atributo a los usuarios llamado “Status”:
