如何在角度 4 中为 ngfor 中的每个元素附加全局变量?

Question

我有一个全局变量public right: any = 30;

我想从每个元素唯一地调用这个变量，并在 ngfor 中将其递增 30(循环People对象(：

interface Person {
name: String,
title: String,
content: String,
image: String,
rate: String,
classActive: String,
active: Boolean
}
@Component({
selector: 'app-testimonials',
templateUrl: './testimonials.component.html',
styleUrls: ['./testimonials.component.scss']
})
export class TestimonialsComponent {
people: Person[] = [{
name: 'Douglas  Pace',
title: 'Parcelivery Nailed The Efficiency',
content: 'Since I installed this app, its always help me book every tickets I need like flight, concert, ' +
'movie or hotel. I don't need to install different app for different ticket. The payment is also very easy',
image: '../../assets/img/profile_pics/profile_pic.jpg',
rate: '4.5',
classActive: 'testimonials__selected-visible',
active: true
},
{
name: 'Naseebullah  Ahmadi',
title: 'Parcelivery Nailed The Efficiency',
content: 'Since I installed this app, its always help me book every tickets I need like flight, concert, ' +
'movie or hotel. I don't need to install different app for different ticket. The payment is also very easy',
image: '../../assets/img/profile_pics/profile_pic.jpg',
rate: '4.5',
classActive: '',
active: false
},
{
name: 'Haseebullah Ahmadi',
title: 'Parcelivery Nailed The Efficiency',
content: 'Since I installed this app, its always help me book every tickets I need like flight, concert, ' +
'movie or hotel. I don't need to install different app for different ticket. The payment is also very easy',
image: '../../assets/img/profile_pics/profile_pic.jpg',
rate: '4.5',
classActive: '',
active: false
}
];
public right: any = 30;
constructor() {}
stackItem(a) {
console.log(a);
}
}

<div *ngFor="let person of people; let last = last" 
class="testimonials__card-container"
#__person
[ngClass]="{'testimonials__card-container--not-visible': !person.active}" 
[style.right]="stackItem(__person.right)">
</div>

我记得在 Angular 2 中，我们可以调用全局变量作为 ngfor 中每个元素的实例。但在 angular4 中并非如此。还有其他办法吗？

Answer 1

<div *ngFor="let person of people; let last = last" 
class="testimonials__card-container"
#__person
[ngClass]="{'testimonials__card-container--not-visible': !person.active}" 
[style.right]="stackItem()">
</div>
---------------- 
stackItem() {
this.right = this.right + 30;
return this.right;
}

Answer 2

这段代码对我有用：

<div *ngFor="let person of people; let last = last" 
class="testimonials__card-container"
#__person
[ngClass]="{'testimonials__card-container--not-visible': !person.active}" 
[style.right]="stackItem(right)">
</div>

请注意，它只是引用right而不是__person.right，因为right被定义为组件类的属性，而不是 person 对象的属性。

如果需要它对每个人是唯一的，而不是实际上的全局变量，则将right属性添加到 people 对象。

此外，哈希 (#( 允许您为其附加到的元素定义template reference variable。因此，您为每个div创建了一个名为__person的模板引用变量。这是引用div 元素而不是关联的人员对象。