ngFor多次觸發內嵌角2隱藏屬性

我正在使用返回布爾值的函數來使用ngFor循環內的隱藏屬性設置項可見性。ngFor多次觸發內嵌角2隱藏屬性

const countries = [ 
    {country: 'USA', hide: 'false'}, 
    {country: 'UK', hide: 'false'}, 
    {country: 'Germany', hide: 'true'}, 
    {country: 'France', hide: 'true'}, 
    {country: 'Japan', hide: 'false'}, 
    {country: 'Russia', hide: 'false'} 
] 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
    </div> 
    <my-list></my-list> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

@Component({ 
    selector: 'my-list', 
    template: ` 
    <ul> 
     <li *ngFor="let l of list" [hidden]="setVisibility(l)">{{l.country}}</li> 
    </ul> 
    `, 
}) 
export class List implements OnInit { 
    list; 
    ngOnInit(){ 
    this.list = countries 
    } 

    setVisibility(country){ 
    console.log('setting'); 
    let hide = false; 
    if(country.hide === 'true'){ 
     hide = true; 
    } 
    return hide; 
    } 
}

我在setVisibility方法中放了一個console.log來檢查這個方法被調用的次數。我預計它被稱爲6次（每個項目1次），但實際上它被稱爲24次（每個項目4次）。爲什麼這個方法被調用了很多次？ plunker

來源

2017-07-12 Diego Vega

它可以是甚至更多，它是關於如何角讀取您函數綁定，順便說一句，最好不要在綁定中使用函數，而是在你的原因，我會說最好這樣做''[hidden] =「l.hide ==='true'」' – RezaRahmati

我簡化了函數有點顯示它，但實際上功能應該lo op通過對象屬性設置可見性並且不適合在模板上 –

我證明了它的重複性，它只有4次 – alehn96

正如RezaRahmati所說，它可以被稱爲更多。現在你有四個基本組件lifecycle hooks被調用，這很可能就是爲什麼你每個項目收到四個電話。如果要更改數據，則會再次調用該函數（可能每次更改兩次）。由於ngFor是依賴於數據的變化，它會重新渲染並根據需要調用函數。另外，如前所述，通過直接訪問變量來設置[hidden]將會是一個更快的過程（儘管它的調用次數與您的函數一樣多）。這只是Angular如何管理這些動態變量。這裏有一個小plunker來告訴你如何像這樣典型的做法：

打字稿變量：

const countries = [ 
    {country: 'USA', hide: false}, 
    {country: 'UK', hide: false}, 
    {country: 'Germany', hide: true}, 
    {country: 'France', hide: true}, 
    {country: 'Japan', hide: false}, 
    {country: 'Russia', hide: false} 
]

組件模板：

<ul> 
    <li *ngFor="let l of list" [hidden]="l.hide">{{l.country}}</li> 
</ul>

來源

2017-07-12 21:21:23

ngFor多次觸發內嵌角2隱藏屬性

回答

相關問題