scss 取决于 ngFor答案

【问题标题】：scss depending on ngForscss 取决于 ngFor
【发布时间】：2022-06-14 21:29:39
【问题描述】：

我正在做一个 Angular 项目，我有 3 张卡片显示在 *ngFor 中这是我的卡片 html 组件：

<div routerLink="{{category.title}}/chapters/{{category.position}}" class="card {{category.title}}">
<div class="circle">
    <h3 class="title-circle">{{ (category.title.length > 4) ? (category.title | slice:0:4) + '' : category.title }}</h3>
    <div data-percent="10" class="percentage">
        <svg>
    <circle cx="146" cy="163" r="137"></circle>
    <circle cx="146" cy="163" r="137" [style.strokeDashoffset]="dashoffset"></circle>
  </svg>
        <div class="number">
            <h2>{{progression}}%</h2>
        </div>
    </div>
    <img src="../../../assets/LogoLanguage/HTML.png" loading="lazy" alt="HTML" class="logo" />
</div>
<div class="content">
    <h2>{{ (category.title.length > 4) ? (category.title | slice:0:4) + '' : category.title }}</h2>
    <div class="icon">
        <i class="fa-solid fa-book"><p class="info">54 cours</p></i>
        <i class="fa-solid fa-clock"><p class="info">4h 30min</p></i>
    </div>
    <i class="fa-solid fa-suitcase"><p class="info">Prérequis : Aucun</p></i>
    <div class="text">

        <p>{{ (category.description.length > 230) ? (category.description | slice:0:204) + '...' : category.description }}</p>
    </div>
</div>
<img src="../../../assets/DonkeyLangage/Pirate.png" loading="lazy" class="donkey_html" alt="" />

还有我的 ts 组件：

 dashoffset: number =  (865 - (865 * this.progress())/ 100);
percentage = 10
progression = this.progress()
nbLessonsFinish(){
  return 3 //My future code here (boolean)
}

nbLessonsInChapter(){
  return 10 //My future code here (boolean)
}
progress(){
  return ((this.nbLessonsFinish() / this.nbLessonsInChapter()) * 100)
}

问题是：我的 3 张卡具有相同的进程，我想知道如何根据我想要的类通过这个 [style.strokeDashoffset] 谢谢你帮助我

这是视图：

【问题讨论】：

到目前为止您尝试了哪些方法，与您的预期有何不同？

标签： angular typescript sass