Angular 2 ngfor first、last、index loop


94

この例の最初のオカレンスをデフォルトとして設定しようとしています:plunkr

次のエラーが発生します。

    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

なにが問題ですか??

回答:


187

このプランカーをチェックしてください

変数にバインドするときは、角かっこを使用する必要があります。また、そのようなテンプレート内で変数を宣言するためではなく、HTML内の要素への参照を取得する場合にハッシュタグを使用します。

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

編集:Christopher Mooreに 感謝します:Angularは次のローカル変数を公開します:

  • index
  • first
  • last
  • even
  • odd

ありがとうございました!それは私を大いに助けました、しかしそれについて検索したので私は最初のものを使おうとしました:blog.angular-university.io/angular-2-ngfor(リストの最初と最後の要素を特定する)
PriNcee

ああ、わかりました。あなたもそれを行うことができます。の代わりにlet i = index、に変更しlet first = first;、[checked]バインディングを変更して、「i == 0」ではなく「first」をチェックするようにします。
Steveadoo 2017年

いいね!今働いています!しかし、チェックされた属性を角かっこでバインドする必要がある理由がまったくわかりません
PriNcee 2017年

29
中@SteveadoongFor角度は、次のローカル変数を公開してindexfirstlastevenodd。将来のユーザーのためにこの点を明確にするために答えを更新できますか?
クリストファームーア

2
代わりに、let first = first次のように記述できますfirst as isFirst(isFirstはカスタム変数です):angular.io/api/common/NgForOf#local-variables
jurl 2018

58

これがAngular6でどのように行われたかです

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

からlet first = firstへの変更に注意してくださいfirst as isFirst


パイプ|を機能させるに;は、パイプをに交換する必要があります。
Florian Moser

let first = firstそして、first as isFirst宣言の両方が、二番目の別名はかなり読みやすい使用に適切である
モハンラム

3

これにより*ngFor、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>

これらのエイリアスはで使用できます *ngFor

  • indexnumberlet i = indexオブジェクトのすべてのインデックスを取得します。
  • firstbooleanlet first = firstオブジェクトの最初のインデックスを取得します。
  • lastbooleanlet last = lastオブジェクトの最後のインデックスを取得します。
  • oddbooleanlet odd = oddオブジェクトの奇数のインデックスを取得します。
  • evenbooleanlet even = evenオブジェクトのも、インデックスを取得します。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.