angular 2仅为一个元素在*nG中设置动画
我在*ngFor中使用动画。当我单击并制作动画时,它会在循环中设置所有元素的动画,但我只希望设置一个元素的动画。我该怎么做 html:angular 2仅为一个元素在*nG中设置动画,angular,animation,cycle,Angular,Animation,Cycle,我在*ngFor中使用动画。当我单击并制作动画时,它会在循环中设置所有元素的动画,但我只希望设置一个元素的动画。我该怎么做 html: {{c.name}} Все характеристики смарт стола 该“键”不是使用全局变量,而是属于对象“g”的变量 {{c.name}} Все характеристики смарт стола 您可以尝试使用查询吗?参考更多在这里谢谢你的工作!但我认为我可以做到这一点,而不必为每个元素创建数组,无论如何,这是一个很好的例子,我看不
{{c.name}}
Все характеристики смарт стола
该“键”不是使用全局变量,而是属于对象“g”的变量
{{c.name}}
Все характеристики смарт стола
您可以尝试使用查询吗?参考更多在这里谢谢你的工作!但我认为我可以做到这一点,而不必为每个元素创建数组,无论如何,这是一个很好的例子,我看不出它是如何工作的,但这项工作很好,谢谢@简要解释:您有一个对象数组,在一个已经存在的对象中,您可以简单地添加一个变量myobject.newproperty=value(如果您在.html中写入{goods | json}},您可以看到它)。如果此对象没有属性“newproperty”,则myobject.newproperty将其添加到对象中,如果对象具有该属性,则更改属性的值。我宁愿不调用函数,只使用三元运算符。g、 state=='in'仅在g.state为'in'时为真(如果未定义,则不符合条件)
@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() {
}
}
<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>
<!--g.state-->
<div class="char_block" [@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>