如何在angular 4中为ngfor中的每个元素添加全局变量？

我有一个全局变量public right: any = 30;如何在angular 4中为ngfor中的每个元素添加全局变量？

，我想从每个元件唯一地调用这个变量和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中情况并非如此。有没有其他方法？

来源

2017-07-31 James

1.我对你试图达到的目标有点困惑。我猜console.log（a）;给'indefined ...'？ – Vega

我想要的是通过传递一个全局变量的实例来为我们的人物对象中的每个元素增加我的全局变量。是的，console.log（）打印未定义，即使我将全局变量赋值为30. @Vega – James

__person.right不是全局变量。 right是一个全局变量，#_person是一个模板变量 – Vega

<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; 
    }

来源

2017-07-31 21:37:36 Vega

我可以做到这一点。但是Im仍然在不创建实例的情况下调用全局变量。我希望能够以某种方式使对象中的每个项目都具有唯一性 – James

此代码为我工作：

<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被定义为组件类的属性，而不是人物对象。

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

此外，散列（＃）允许您为其所连接的元素定义template reference variable。因此，您为每个div创建了一个名为__person的模板引用变量。这是参考div元素而不是的关联人物对象。

来源

2017-07-31 23:15:05 DeborahK

如何在angular 4中为ngfor中的每个元素添加全局变量？

回答

相关问题