3
votes

Stylisation sur interpolation de chaîne en HTML - Angular

Supposons que le modèle reçoive la chaîne du composant d'une manière liaison, interpolation:

<span>{{list.members}}</span>

Et il est rendu comme

5 membres

Comment puis-je modifier une chaîne sur HTML sans rien changer sur le composant afin que je puisse obtenir le numéro 5 en gras et les "membres" laissés intacts:

5 membres

angular html css

1 commentaires

Vous devrez créer un tube personnalisé et utiliser comme {{list.members | strongifyNumber}}

3 Réponses :

1
votes

J'ai basé sur la réponse des crédits de Visionstar à lui

Le problème est que la: first-letter ne fonctionne pas sur élément en ligne (comme span par exemple), mais sur des éléments bloc / bloc en ligne (par exemple p, légende de tableau, cellule de tableau, etc.). La première lettre en gras sur span ne fonctionne pas

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="display: block;">5 members</span>
<p>   5 members</p>

<span  id="myspan" style="display: block;">100 members members</span>

span:first-of-type:first-letter 
{ font-weight: bold; 
  }
p:first-of-type:first-letter 
{ font-weight: bold; }

.number
{
  font-weight: bold;
}

grâce au commentaire de aragorn pour compléter la réponse dans le cas où vous avez un nombre supérieur à un chiffre, je pense que vous pourriez utiliser une fonction js pour obtenir le contenu du span et le modifier, comme j'ai vu d'autres messages, il y a des gens qui attendent CSS4, ou un sélecteur de mots pour css qui n'existe pas encore

var text=$('#myspan').text()
first = text.slice(0, text.indexOf(" "));
other=text.slice(text.indexOf(" "), text.lenght);
var newdata="<span class='number'>"+first+"</span> "+other;
$('#myspan').html(newdata);

<span style="display: block;">5 members</span>
<p>   5 members</p>

span:first-of-type:first-letter 
{ font-weight: bold; }
p:first-of-type:first-letter 
{ font-weight: bold; }

3 commentaires

si vous avez raison j'ai juste essayé avec des nombres à 2 chiffres et un garçon pour trouver un moyen de le faire en le traitant comme s'il s'agissait d'un mot, je pense qu'il serait préférable d'avoir les données des membres séparément ou regroupées dans une autre étiquette de cette manière ne serait que le style de l'étiquette; ou avec Jquery accéder au contenu de l'étiquette et le remplacer

Il n'y a pas: firstWord en css malheureusement

oui je sais, sélecteur CSS4 peut-être? dans un futur lointain

1
votes

Vous pouvez séparer la valeur dans le fichier component.ts et conserver dans des variables séparées le mot "membres" et le "nombre".

<strong>membersValue</strong> <span>{{membersLabel}}</span>

En les séparant, vous pouvez le styliser comme vous aimez

const value = "5 members".split(" ");
const membersLabel = value[1];
const membersValue = value[0];

Ce n'est pas une preuve pareille. Vous devriez l'écrire de manière à éviter les cas dans lesquels vous n'aurez pas le modèle "# membres";

0 commentaires

4
votes

Voici une solution de canal:

strong-number.pipe.ts:

<span [innerHTML]="list.members | strongifyNumber"></span>

app.module.ts:

import { StrongifyNumber } from './strong-number.pipe';
@NgModule({
  declarations: [
    AppComponent, StrongifyNumber
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [StrongifyNumber],
  bootstrap: [AppComponent]
})

0 commentaires