Angular 2 ng для первого, последнего, индексного цикла

86

Я пытаюсь установить по умолчанию первое вхождение в этом примере: 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

что не так??

angular angular-material ПРИНЦЕ
источник

Ответы:

175

Проверьте этот plunkr .

Когда вы привязываетесь к переменным, вам нужно использовать скобки. Кроме того, вы используете хэштег, когда хотите получить ссылки на элементы в вашем html, а не для объявления переменных внутри подобных шаблонов.

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

Изменить: благодаря Кристоферу Муру : Angular предоставляет следующие локальные переменные:

  • index
  • first
  • last
  • even
  • odd
Steveadoo
источник
Спасибо! это очень помогло мне, но я попытался использовать первый, потому что, ища его, я нашел несколько примеров, например: blog.angular-university.io/angular-2-ngfor (Определение первого и последнего элемента списка)
PriNcee
Ах хорошо. Вы тоже можете это сделать. Вместо этого let i = indexпросто измените его на let first = first;и измените привязку [checked], чтобы просто отметить «first» вместо «i == 0».
Steveadoo
отлично! сейчас работает! но я вообще не могу понять, почему я должен связывать отмеченный атрибут скобками
PriNcee
29
@Steveadoo в ngForугловых разоблачений следующие локальные переменные index, first, last, evenи odd. Не могли бы вы обновить ответ, чтобы прояснить этот момент для будущих пользователей?
Кристофер Мур
2
Вместо этого let first = firstвы можете написать first as isFirst(isFirst - настраиваемая переменная), как описано здесь: angular.io/api/common/NgForOf#local-variables
jurl 02
57

Вот как это делается в Angular 6

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

Обратите внимание на изменение с let first = firstнаfirst as isFirst

Себастьян Эрнандес
источник
Вам нужно заменить трубу |с ;для его работы.
Флориан Мозер,
let first = firstи first as isFirstоба объявления правильны для использования, второй псевдоним в значительной степени
Mohan Ram
0

Таким образом, вы можете получить любой индекс в *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

  • index: number: let i = indexЧтобы получить весь индекс объекта.
  • first: boolean: let first = firstЧтобы получить первый индекс объекта.
  • last: boolean: let last = lastЧтобы получить последний индекс объекта.
  • odd: boolean: let odd = oddЧтобы получить нечетный индекс объекта.
  • even: boolean: let even = evenПолучить даже индекс объекта.
Рохит Тагадия
источник