繁体   English   中英

* NgFor中的带条件的类

Conditional class in *NgFor with angular

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我有这个html代码:

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : isClassVisible}"
                [selected]="idioma"
                (click)="isClassVisible = !isClassVisible;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>

当我单击芯片时,所有类均发生变化,而不仅仅是单击的芯片。 我正在使用Angular 5。

我希望只是单击元素更改了CSS

看到这张照片之前和之后

之前 在此处输入图片说明

之后 在此处输入图片说明

有人可以帮忙吗?

2 个回复

我建议您将index存储在isClassVisible ,并将其重命名为visibleClassIndex ,然后通过用visibleClassIndex检查当前index来检查[ngClass]当前类是否可见,因为将有0索引,这是false值,我建议您将visibleClassIndex类型定义为null | number null | numberundefined | number undefined | number ,并像这样进行检查visibleClassIndex !== null && visibleClassIndex === ivisibleClassIndex !== undefined && visibleClassIndex === i ,如果您选择null确保将null为默认值visibleClassIndex: null | number = null; visibleClassIndex: null | number = null; ,我建议您使用undefined ,因为有了它,您不需要定义默认类型,因为它会自动变为undefined

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : visibleClassIndex !== undefined && visibleClassIndex === i}"
                [selected]="idioma"
                (click)="visibleClassIndex = i;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>

解:-

Stackblitz链接:-https://stackblitz.com/edit/angular-material-jyzotv?file = app%2Fapp.component.html

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  [selected]="tab === idioma"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

  <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

-

export class AppComponent  {
  idiomas = ['A','B','C']
  tab = this.idiomas[0];

  activateClass(subModule){
  this.tab = subModule;    
}
}
1 Angular:ngFor中重复项的条件类

有一个代码 会根据颜色列表的颜色对象的十六进制属性填充十六进制代码列表。 结果,上面的duplicate类被分配给十六进制与第0个项目的十六进制相同的任何项目 。 正确? 是否可以修改此代码,以便将duplicate类应用于任何重复项,而不仅仅是与0th项目进行比较 ...

2 * ngFor中的条件

我有两个字符串数组,我想迭代其中一个取决于条件。 如何避免代码重复? 现在*ngIf现在: 有没有更好的办法? ...

3 Angular2:ngFor和条件类

我正在尝试在Angular 2中实现2级导航,其中第一级像accordeon一样工作。 如果单击第一级,则会显示子元素。 这是通过简单地将css类open到父li元素来完成的。 所有这些都是由2 ngFor循环动态生成的。 这就是我现在拥有的: 问题是,我得到一个“例外:无法 ...

2016-07-29 08:22:15 2 1531   angular
4 角度2:* ngFor中的条件

我希望在HTML中构建一个元素列表,但是在该列表中的某个属性上。 在#record对象中,有一个isSingle属性,它是true或false。 我想跳过循环中的错误元素,而不必在DOM中留下空DIV ...

5 ngFor中的条件切片管

如何在ngFor中使用条件切片ngFor ? 在html模板下面: 因此,仅当bucketName.show_max不为null时,如何才能用代表bucketName.show_max的ngFor的数字来分割输出。 否则,显示所有结果。 希望有人可以帮助我解决这个问题。 ...

6 离子选择中带* ngFor的条件

我是Angular 6和Ionic 5的新手,但目前正在学习。 我面临我的选择组件的问题,我有这个json: 我的HTML文件中有这个: 我似乎无法找到如何在具有Disponible = 1的Premios中显示。我尝试了* ngIf,但显然我不能一起使用它们。 我看过一些论 ...

7 根据条件将类分配给 *ngFor 内的 div

我需要根据方法将一个类分配给 *ngFor 迭代中的 div。 以下是我的 HTML 代码:- 我的 Ts 代码:- 即使 selectedCodeMethod() 更改了 selectedCode 数组的内容,ngClass 中的方法也不会反映更改。 我需要做哪些改变? ...

9 ngFor中的动态CSS类

嗨,我正在研究纯CSS的星级,但在CSS类别上却遇到了困难。 当我将鼠标悬停在其他星级上时,第一个或前5个星级正在悬停。 像这张照片一样,我试图对第二个问题进行评分,但是第一个问题中的前五颗星也在徘徊。 这是我的代码 这是我设置单选按钮样式的CSS 我只想让我的5 ...

10 Angular 中 ngFor 中的 isEmpty 条件

我有一个项目,我在其中显示医生的日程安排。 我创建了一个名为“dates”的数组,其中包含字符串形式的下 7 个日期 我有一个类似于名为 scheduleTime 的类的时间包 其中有 我收到一个名为“Schedule Time”的 scheduleTime 类型的数组,其中包含日期、小时和分 ...

2020-05-30 15:23:08 1 43   angular
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM