Question

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

我希望从每个元素中唯一地调用此变量，并在ngfor（循环People对象）中将其递增30：

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。因此，您为每个名为__person的div创建了一个模板引用变量。这是引用div元素而不是关联的人物对象。

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

2 个答案: