ngFor rufen Sie die Funktion Angular2

Folgende Werke:

*ngFor="let child of items || []; let i = index;"

Diese nicht:

*ngFor="let child of items || []; let specialVersionOfI = someFunction(index);"

Bekomme ich: 

Parser Error: Unexpected token (, expected identifier, keyword, or string at column 56 in [ngFor let child of items |

Was ist die Argumentation hinter diesem, und gibt es eine alterantive?

  • Ich denke items || [] ist vielleicht verwirrend-parser, ändern Sie es zu (items || []) wrap mit einer Klammer
  • Ich bekomme immer noch das gleiche Problem, ohne es leider nicht 🙁
InformationsquelleAutor David | 2016-09-06
  1. 1

    Sehr viel besser lesbar werden version mit mapping in der Komponente, sth wie:

    this.items.map((child, i) => {
    child['specialVersionOfI'] = this.someFunction(i);
    return child;
    })
    und dann im template einfach nur {{child.specialVersionOfI}}

    • Gut, diese beiden sind die offensichtliche workarounds, in der Tat ist dies, was ich jetzt... aber Sie sind immer noch workarounds. Ich Frage mich, ob Sie planen an der Umsetzung dieses in absehbarer Zeit?
    • Um ehrlich zu sein, ich würde nicht sagen, dass es Abhilfe. Meiner Meinung nach ist es besser, um anzeigen nur verantwortlich für die Darstellung der Daten statt, die Entscheidung was und wo machen einige Berechnung.
    • Ein großer Grund zu wollen, ist es, wenn die spezielle berechnete Wert wird benötigt, in mehreren Orten und du willst also nur berechnen, es einmal für jede Schleife, iteration, anstatt über und über über einzelnen Funktionsaufrufen (oder Verkleben der Logik versuchen zu tun, die irgendeine Art von Wert Zwischenspeichern innerhalb der Funktion).
    InformationsquelleAutor be4code
  2. 1

    Verwenden Sie die Funktion später in der Schleife nicht, wenn Sie ordnen Sie die index.

    <u>
   <li *ngFor="let item of items || []; let i=index">
      use function here >> {{someFunction(i)}}
   </li>
</u>

    Könnte man auch manipulieren des Arrays in das Modell und speichern Sie den index in eine zweite parallel-array, dann auf es in der Vorlage.

    <u>
   <li *ngFor="let item of items || []; let i=index">
      access special index >> {{customIndices[i]}}
   </li>
</u>
    • Einverstanden mit dieser Antwort. Der Weg *ngFor Arbeit ist, dass es eine Zucker-syntax über einige andere Bindungen. Wenn der Winkel kompilieren ausgeführt wird, ist es kompiliert in mehrere Bindungen. Die syntax von ngFor ist nicht gut dokumentiert (zumindest konnte ich nicht finden ein umfassenden Leitfaden, wie Sie die Analyse-Arbeit, die gegenwärtig), so ist es besser, lassen Sie es so einfach wie möglich und fügen Sie dann Ihre eigene Logik innerhalb der Schleife, da @BeetleJuice vorgeschlagen
    InformationsquelleAutor BeetleJuice
Schreibe einen Kommentar