如何在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中的每個元素添加全局變量？

回答

相關問題