Angular 2 verstecktes Attribut in ngFor mehrere Male auslösen

Question

Ich benutze eine Funktion, die einen booleschen Wert zurückgibt, um die Sichtbarkeit der Elemente mit dem versteckten Attribut innerhalb einer ngFor-Schleife festzulegen.

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

habe ich ein console.log innerhalb der setVisibility Methode, wie oft diese Methode aufgerufen, um zu überprüfen. Ich habe erwartet, dass es 6 Mal aufgerufen wird (1 Mal pro Stück), aber es wird tatsächlich 24 Mal aufgerufen (4 Mal pro Stück). Warum wird diese Methode so oft aufgerufen? plunker

Answer 1

Wie RezaRahmati erwähnt, kann es noch mehr genannt werden. Im Moment haben Sie vier grundlegende Komponenten lifecycle hooks aufgerufen, und das ist wahrscheinlich, warum Sie vier Anrufe pro Artikel erhalten. Wenn Sie die Daten ändern, wird die Funktion erneut aufgerufen (wahrscheinlich zweimal pro Änderung). Da ngFor von Änderungen in den Daten abhängig ist, wird es erneut gerendert und ruft die Funktion nach Bedarf auf.

Wie bereits erwähnt, wird das Setzen von [versteckt] durch direkten Zugriff auf die Variable ein viel schnellerer Prozess sein (obwohl es genauso oft aufgerufen wird wie Ihre Funktion). So funktioniert Angular bei der Verwaltung dieser dynamischen Variablen. Hier ist eine kleine plunker Ihnen zu zeigen, wie so etwas wie dies in der Regel getan wird:

Typoskript Variable:

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

Komponente Vorlage:

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