Winkel 2 ng für erste, letzte Indexschleife

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

@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

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

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

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