如何在使用 *ngFor 创建的 ionic 3 组件中为 css 类变量动态赋值

Posted 2023-03-25

【中文标题】如何在使用 *ngFor 创建的 ionic 3 组件中为 css 类变量动态赋值

【英文标题】：How to dynamically assign value to css class variable in ionic 3 component created with *ngFor

【发布时间】：2021-10-17 10:03:06

【问题描述】：

我的 scss 代码：

    :root 
    --star-size: 20px;
    --star-color: gray;
    --star-background: #fc0;    
  
  
  .stars 

    --percent: calc(var(--rating) / 5 * 100%);
    
    display: inline-block;
    font-size: var(--star-size);
    font-family: Times; // make sure ★ appears correctly
    line-height: 1;
    
    &::before 
      content: '★★★★★';
      letter-spacing: 0px;
      background: linear-gradient(270deg, var(--star-background) var(--percent), var(--star-color) var(--percent));
      -webkit-background-clip: text;      
      -webkit-text-fill-color: transparent;
    
  

这是我的html代码：

<ion-list no-lines>
<ion-item *ngFor="let product of products let i = index" (click)="openProductPage(product)">
  <ion-thumbnail item-left>
    <img [src]="product.images[0].src" />
  </ion-thumbnail>
  <h2>  product.name  </h2>
  <p>
  <ng-container *ngIf="product.average_rating > 0">

    <span  class="stars" [style.--rating]=product.average_rating ></span>

  </ng-container>
  </p>
</ion-item>

如何在 html (span 或 div 或 ...) 中为 star 类的 --rating 变量赋值？我的情况不起作用（ [style.--rating]=product.average_rating ）。我也试过： [ngStyle]="'--rating': product.average_rating";但没有明星出现！

【问题讨论】：

你不能将值从 js 传递到 scss...你应该绕过这段代码...可能有一些建议...也许你可以在使用接收数据后创建一个样式屏蔽const stylesheet = document.createElement('style') 然后在你将你必须的类添加到这个风格榆树之后，使用 document.head.appendChild(stylesheet) 然后你可以给类星，但它不会是多的以防万一不同的记录..也许在样式表中您可以根据索引命名starts0、stars1，在html中也可以调用class="starsi"或...

因为使用附加样式并不是一件好事，甚至不符合逻辑去同一个类但会使用多个名称......所以你可以使用 ngStyle ，你可以通过这个链接了解更多信息@ 987654321@

嗨@MostafaHarb 我知道ngStyle，但在我的情况下没有用！ class="stars" [ngStyle]="'--rating': product.average_rating"

问题是我们无法将变量从 js 传递到 css...无法应用绑定值...您可以做的最直接的事情是：class="stars " [style.background]="background: linear-gradient(270deg, var(也许这里是背景变量) var(这里直接加你的百分比), var(这里直接加你的颜色) var(这里也加你的百分比)) ;"

但不允许通过绑定传递变量...

【参考方案1】：

我终于这样做了：

    <div [ngStyle]="
      'font-size': '16px',
      'letter-spacing': '0px',
      'font-family': 'Times', // <== make sure ★ appears correctly
      'background': 'linear-gradient(270deg, gold ' + product.average_rating/5*100 + '% , gray ' + product.average_rating/5*100 + '%)',
      '-webkit-background-clip': 'text',
      'background-clip': 'text',
      '-webkit-text-fill-color': 'transparent',
      'display': 'inline-block'
     "> ★★★★★ </div> // <== I've added stars here! outside of css section.