Winkel 2 ng für erste, letzte Indexschleife

86

Ich versuche, das erste Vorkommen in diesem Beispiel als Standard festzulegen : plunkr

den folgenden Fehler erhalten:

    Unhandled Promise rejection: Template parse errors:
    TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup">
    <md-button-toggle [ERROR ->]*ngFor="let indicador of indicadores; #first = first" value="indicador.id" [checked]="first">"): ng:///AppModule/HomeComponent.html@35:78
    Parser Error: Unexpected token #, expected identifier, keyword, or string at column 31 in [let indicador of indicadores; #first = first] in ng:///AppModule/HomeComponent.html@35:78 ("<md-button-toggle *ngFor="let indicador of indicadores; #first = first" value="indicador.id" [ERROR ->][checked]="first">
    <span>{{ indicado"): ng:///AppModule/HomeComponent.html@35:153

Was ist falsch??

angular angular-material PriNcee
quelle

Antworten:

174

Schauen Sie sich diesen Plunkr an .

Wenn Sie an Variablen binden, müssen Sie die Klammern verwenden. Sie verwenden das Hashtag auch, wenn Sie Verweise auf Elemente in Ihrem HTML-Code abrufen möchten, und nicht, um Variablen in solchen Vorlagen zu deklarieren.

<md-button-toggle *ngFor="let indicador of indicadores; let first = first;" [value]="indicador.id" [checked]="first"> 
...

Bearbeiten: Dank an Christopher Moore : Angular macht die folgenden lokalen Variablen verfügbar:

  • index
  • first
  • last
  • even
  • odd
Steveadoo
quelle
Vielen Dank! das hat mir sehr geholfen, aber ich habe versucht, das erste zu verwenden, weil ich beim Suchen einige Beispiele gefunden habe wie: blog.angular-university.io/angular-2-ngfor (Identifizieren des ersten und des letzten Elements einer Liste)
PriNcee
Ah, ok. Sie können das auch tun. let i = indexÄndern Sie es stattdessen einfach in let first = first;und ändern Sie die [markierte] Bindung so, dass nur "zuerst" anstelle von "i == 0" überprüft wird.
Steveadoo
nett! jetzt funktioniert! aber ich kann überhaupt nicht verstehen, warum ich das überprüfte Attribut mit Klammern binden muss
PriNcee
29
@Steveadoo in ngForAngular macht die folgenden lokalen Variablen index, first, last, evenund odd. Könnten Sie die Antwort aktualisieren, um diesen Punkt für zukünftige Benutzer zu klären?
Christopher Moore
2
Stattdessen let first = firstkönnen Sie first as isFirstwie hier beschrieben schreiben (isFirst ist die benutzerdefinierte Variable): angle.io/api/common/NgForOf#local-variables
jurl
57

Hier ist, wie es in Angular 6 gemacht wird

<li *ngFor="let user of userObservable ; first as isFirst">
   <span *ngIf="isFirst">default</span>
</li>

Beachten Sie den Wechsel von let first = firstzufirst as isFirst

Sebastian Hernandez
quelle
Sie müssen das Rohr |durch das ersetzen, ;damit es funktioniert.
Florian Moser
let first = firstund first as isFirstbeide Erklärungen sind korrekt zu verwenden, der zweite Alias ​​ist ziemlich gut lesbar
Mohan Ram
0

Auf diese Weise können Sie jeden Index in *ngForSchleife in ANGULAR ...

<ul>
  <li *ngFor="let object of myArray; let i = index; let first = first ;let last = last;">
    <div *ngIf="first">
       // write your code...
    </div>

    <div *ngIf="last">
       // write your code...
    </div>
  </li>
</ul>

Wir können diesen Alias ​​in verwenden *ngFor

  • index: number: let i = indexAlle Index des Objekts zu erhalten.
  • first: boolean: let first = firstErster Index des Objekts zu erhalten.
  • last: boolean: let last = lastLetzten Index des Objekts zu erhalten.
  • odd: boolean: let odd = oddUngeradem Index des Objekts zu erhalten.
  • even: boolean: let even = evenGeradem Index des Objekts zu erhalten.
Rohit Tagadiya
quelle