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 hacer un salto de línea correctamente, sin coma (angular-material tooltip)

16 Jul, 2023 Programación

Mi código HTML:

<ng-container matcolumndef="participants">
    <mat-header-cell mat-header-cell="" *matheadercelldef="">Уч.</mat-header-cell>
    <mat-cell mat-cell="" *matcelldef="let row" mattooltip="{{ row.participants | displayUserTooltip }}">
        {{ row?.participants?.length }}
    </mat-cell>
</ng-container>

Mi SCSS:

::ng-deep .mat-tooltip {
    font-size: rem(12px);
    margin-right: 10px;
    white-space: pre-line;
}

Mi pipe:

transform(items: any[]): any {
    if (items) {
        return items?.map(({ employee }) => ` ${employee.surname} ${employee.name} ${employee.patronymic}`+'\n');
    }
}

Resultado actual:
imagen

Dime cómo puedo transferir una línea sin una coma.
¿De dónde viene esta coma?
He intentado trabajar con el string replace(',', '\n') pero no funcionó.
El salto de línea funciona en conjunto con \n y white-space: pre-line.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para transferir una línea sin una coma, puedes eliminar la coma de la función map de tu pipe y añadir el salto de línea a un elemento span o div separado en tu código HTML.

    Aquí tienes un ejemplo de cómo puedes actualizar tu código para lograr esto:

    Tu pipe actualizado:

    transform(items: any[]): any {
  if (items) {
    return items?.map(({ employee }) =>
      `<span>${employee.surname} ${employee.name} ${employee.patronymic}</span>`
    );
  }
}

    Tu HTML actualizado:

    <ng-container matcolumndef="participants">
  <mat-header-cell mat-header-cell="" *matheadercelldef="">Уч.</mat-header-cell>
  <mat-cell mat-cell="" *matcelldef="let row" mattooltip="{{ row.participants | displayUserTooltip }}">
    <ng-container *ngfor="let participant of row?.participants">
      <div class="participant-tooltip">
        {{ participant }}
      </div>
    </ng-container>
    {{ row?.participants?.length }}
  </mat-cell>
</ng-container>

    Tu SCSS actualizado:

    ::ng-deep .mat-tooltip {
  font-size: rem(12px);
  margin-right: 10px;
}

.participant-tooltip {
  white-space: pre-line;
}

    Al envolver cada participante en un elemento div separado con la clase participant-tooltip, ahora puedes aplicar estilos a los saltos de línea por separado en tu archivo CSS. En este caso, se añade la propiedad white-space: pre-line a la clase participant-tooltip para permitir saltos de línea.

    Ten en cuenta que la pseudo-clase ::ng-deep está obsoleta y se debe evitar en la medida de lo posible. En su lugar, puedes utilizar la propiedad encapsulation: ViewEncapsulation.None en el decorador de tu componente para permitir que tus estilos SCSS se apliquen globalmente.

Comments are closed.