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

查看此plunkr。

当您绑定到变量时，需要使用括号。另外，当你想要获取html中元素的引用时，你可以使用hashtag，而不是像这样在模板中声明变量。

<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 2

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

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

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

Answer 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

中使用这些别名

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以获得对象的均匀索引。

Angular 2 ngfor first，last，index loop

3 个答案: