Question

我有一个数组，要从中显示范围中的第一项。

目前，我正在获取所有值，而不仅仅是第一个。

<div class="card">  
  <div *ngIf="selectedUser._id">
    <div class="user" *ngFor="let user of users">
       <span> {{ user.event }} </span>
    </div>
  </div>
</div>

正在向我返回所有用户日期事件的列表，我只想要第一个

我还尝试添加user.event [0]无效，它向我显示了日期的第一个字符

我的对象数组

[
   {
      id:XYZ, 
      event: Fri Jul 20 2018 15:00:04 GMT+0200 (CEST)
   }, {
      id:XYZ1, 
      name: Fri Jul 10 2018 15:00:04 GMT+0200 (CEST)
   }, {
      id:XYZ2, 
      name: Fri Aug 20 2018 15:00:04 GMT+0200 (CEST)
   }
]

我尝试了这个可行的解决方案，并实现了我想要的

<div class="message" *ngFor="let user of users | slice:0:1;">

但是我知道这是遍历数组，我需要不做任何事情就得到第一个元素。

我已经尝试过：

<span> {{ users[0].event }} </span>

这使我出错，有时导致事件未定义

Answer 1

您应该检查数组项是否为空

-       Json(term).Data {Models.Term}   object {Models.Term}
+       ChangedBy   
        Description null    string
        ID  27  int
        Inactive    false   bool
        Name    "sdfgdsgf"  string
        SynonymsList    "sdfgdsgfdsgsdgf"   string
+       Updated {09.08.2018 10:00:50}   System.DateTime

Answer 2

我认为最简单的解决方案是在Component类中编写方法firstUser()。

您的打字稿文件应包含

firstUser () {
  return this.users[0];
}

这只会使您的html部分尽可能干净。很有可能您仍然需要两次使用它：

    <div class="user" *ngIf="firstUser" >
         <span>  {{ firstUser.event }} </span>
    </div>

您甚至可能希望打印类似"no user found"之类的消息。

Answer 3

使用safe navigation operator即 ? 来确保检查用户数组中的 undefined 。

Angular安全导航运算符（？。）更加流畅并且防止属性路径中出现null的简便方法。的表达式达到第一个null值时，表达式将失效。显示是空白，但应用程序会继续滚动而不会出现错误。

<span *ngIf="users[0]">
    {{ users[0]?.event }}
</span>

链接到StackBlitz Demo。

Answer 4

只需尝试：

<span> {{ users[0]?.event }} </span>

显示数组的第一个元素而不循环

4 个答案: