Angular 2 ngfor 第一个，最后一个，索引循环

Question

我正在尝试将此示例中的第一个匹配项设置为默认值：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

怎么了？？

Answer 1

这是它在 Angular 6 中的完成方式

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

注意从let first = first 到first as isFirst 的变化

Answer 2

看看这个plunkr。

当您绑定到变量时，您需要使用方括号。此外，当您想要获取对 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

Answer 3

这样您就可以在 ANGULAR 中获得*ngFor 循环中的任何索引...

<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 获取对象的偶数索引。