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.

¿Cómo ajustar cadenas JSON a una clase Angular para el front end?

22 Jul, 2023 Programación

No entiendo cómo los datos se dividen en pares clave-valor en Angular usando un constructor por evento.

Aquí está mi código:

export class KeywordListComponent implements OnDestroy, AfterContentChecked {

messageFromSocket: keywordList[] = [];
wsSubscription: Subscription;
status;

constructor(public webSocketService: WebSocketService) {
this.wsSubscription = this.webSocketService.createObservableSocket('ws://localhost:3000')
.subscribe(
messages => this.messageFromSocket.push(
messages
),
err => console.log('err'),
() => console.log('El flujo observable está completo')
);
}
}

Este es mi archivo component.ts sin algunas cosas. Básicamente, cómo lo tengo funcionando ahora es que cuando llega un evento de websocket, se agrega automáticamente a esta matriz messageFromSocket de tipo keywordList.

La matriz KeywordList es en realidad su propia clase en otro archivo con un constructor dentro de ella.

export class keywordList {
name: string;
keyword: string;
constructor(name: string, keyword: string) { 
this.name = name;
this.keyword = keyword;
}
}

Se muestra en el frontend, pero como su propia matriz grande.

<ng-container class="keywordBox" *ngfor='let message of messageFromSocket'>
<li>
{{ message }}
</li>
</ng-container>

No puedo comprender el concepto de cómo manipular los datos de cadena que llegan desde el websocket para crear un par clave-valor de un nombre y una palabra clave (ambos se envían cada vez a través del websocket sin fallar) y luego mostrarlo en el frontend como en muchos de los ejemplos. Me gustaría hacer esto para poder manipular mejor los datos en la aplicación.

Por ejemplo, actualmente se muestra así:

['George: Hello']
o
['George: Hello', 'Raul: World']

Me gustaría usar la clase KeywordList para separarlos.

Además, si sabes cómo agregar relleno solo al primer elemento en el contenido dinámico, ¿podrías ayudarme? Siento que he intentado todos los trucos de CSS que Angular tiene y aún me falta algo.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás intentando entender cómo crear pares clave-valor a partir de los datos recibidos a través de un websocket y mostrarlos en un formato específico utilizando el framework Angular.

    En el código proporcionado, el KeywordListComponent inicializa una suscripción websocket en su constructor, que envía los datos recibidos al arreglo messageFromSocket de objetos keywordList. La clase keywordList tiene dos propiedades: name y keyword, junto con un constructor que establece estas propiedades utilizando los argumentos pasados.

    Para crear pares clave-valor a partir de los datos recibidos, puedes dividir las cadenas utilizando el separador :, y usar las subcadenas resultantes para crear objetos keywordList. A continuación, se muestra una implementación de ejemplo:

    messages => this.messageFromSocket.push(
    ...messages.map(msg => {
        const [name, keyword] = msg.split(':');
        return new keywordList(name.trim(), keyword.trim());
    })
),

    En este código, se llama al método split en cada cadena de mensaje para separar las subcadenas name y keyword utilizando :. Luego, estas subcadenas se utilizan para crear nuevos objetos keywordList utilizando el constructor.

    Para mostrar los pares clave-valor en un formato específico, puedes utilizar la interpolación de cadenas y CSS de Angular junto con la directiva ngFor. A continuación, se muestra una implementación de ejemplo:

    <div class="keywordBox">
    <ng-container *ngfor="let message of messageFromSocket; let i = index">
        <div class="message-row">
            <span class="name">{{ message.name }}:</span>
            <span class="keyword">{{ message.keyword }}</span>
        </div>
    </ng-container>
</div>

    En este código, se utiliza la directiva ngFor para recorrer el arreglo messageFromSocket y mostrar cada elemento como un div con la clase message-row. Dentro de este div, se utilizan dos elementos span: uno para la propiedad name con la clase name, y otro para la propiedad keyword con la clase keyword. Puedes agregar estilos CSS a estas clases para dar formato a los datos según tus requisitos.

    En cuanto a añadir padding solo al primer ítem en un contenido dinámico, puedes utilizar la propiedad first de la directiva ngFor para aplicar una clase únicamente al primer ítem. A continuación, se muestra una implementación de ejemplo:

    <div class="keywordBox">
    <ng-container *ngfor="let message of messageFromSocket; let first = first; let i = index">
        <div class="message-row" [class.first-item]="first">
            <span class="name">{{ message.name }}:</span>
            <span class="keyword">{{ message.keyword }}</span>
        </div>
    </ng-container>
</div>

    En este código, se utiliza la propiedad first de la directiva ngFor para establecer la variable first en true para el primer ítem del arreglo, y false para el resto. Esta variable se utiliza luego en el atributo class del elemento div para agregar la clase first-item solo al primer ítem. Puedes agregar estilos CSS a esta clase para aplicar padding u cualquier otra forma de formato según tus requisitos.

Comments are closed.