如何使用 ngFor 指令获取角度 5 中的第一个元素？答案

【问题标题】：how to get first element in angular 5 using ngFor directive?如何使用 ngFor 指令获取角度 5 中的第一个元素？
【发布时间】：2018-04-17 11:51:07
【问题描述】：

ngFor 指令在我用来显示颜色数组中的所有颜色时工作正常，但是当我尝试检查它是否是数组的第一个元素时，它会显示错误“无法绑定到 ngForFirst，因为它不是....等等等等”。它几乎显示了一个充满错误的页面。我对角度很陌生，我正在通过导师的教程没有任何错误。不知道为什么。帮帮我

    import { Component, OnInit } from '@angular/core';

    @Component({
     selector: 'app-test',
     template: `
       <div *ngFor = "let color of colors; first as i">
           <h3> {{i}}  </h3>
       </div>` ,
     styles: []
    })

    export class TestComponent implements OnInit {
      public name = "Dipesh";
      public colors = ["Red", "Black", "Green"];
      constructor() { }

      ngOnInit() {
      }

      }

【问题讨论】：

"不能绑定到 ngForFirst，因为它不是 .... blah blah blah " -- 这很有帮助。

标签： angular angular5

【解决方案1】：

试试这个

 <div *ngFor = "let color of colors; let first = first; let last = last">
               <h3> {{first}}  </h3>
               <h3> {{last}}  </h3>
 </div>

【讨论】：

【解决方案2】：

您可以像这样访问第一个元素：

<div *ngFor="let color of colors; let first = first;"> ...

注意：

您可以使用更多功能，例如：odd、even 或 last

Official documentation here

【讨论】：

【解决方案3】：

使用“as”，您尝试将“first”转换为“i”类型的对象。这就是你得到错误的原因。

您可以使用“let”关键字在角度声明变量。例如：让变量名=索引

【讨论】：

不正确，angular.io 文档也显示了上述方法。