我在* ngFor中使用动画。当我点击并执行动画时,它会在循环中为所有元素设置动画,但我希望动画只有一个。我怎样才能做到这一点 ? .................................................. .................................................. .................................................. ...
@Component({
selector: 'app-popular-sensor',
templateUrl: './popular-sensor.component.html',
styleUrls: ['./popular-sensor.component.css'],
animations: [
trigger('focusPanel', [
state('in', style({
height: '20px'
})),
state('out', style({
height: '*',
})),
transition('in => out', animate('400ms ease-in-out'))
])
]
})
export class PopularSensorComponent implements OnInit {
goods;
state = 'in';
constructor(private goodsService: GoodsService) {
goodsService.getGoods()
.subscribe(goods => {
this.goods = goods;
console.log(this.goods);
});
}
toggleChar() {
this.state = this.state === 'in' ? 'out' : '';
}
ngOnInit() {
}
}
HTML:
<div *ngFor="let g of goods"
class="col-sm-4 col-xs-12">
<div class="sensor-block">
<div class="char_block"
[@focusPanel]="state">
<small *ngFor="let c of g.charact">{{c.name}}</small>
</div>
<div class="characteristic"
(click)="toggleChar()">Все характеристики смарт стола
</div>
</div>
</div>
答案 0 :(得分:2)
&#34; key&#34;不使用全局变量,而是变量属于对象&#34; g&#34;
<div class="char_block"
<!--g.state-->
[@focusPanel]="g.state">
<small *ngFor="let c of g.charact">{{c.name}}</small>
</div>
<!--change g.state-->
<div class="characteristic"
(click)="g.state=='in'? 'out':'in'">Все характеристики смарт стола
</div>