Ionic 3如何不使用*ngFor从单元素数组获取数据？

嗨，这个需求太常见了——当你明确数组里只有一条数据时，完全没必要用*ngFor循环绕圈子，直接访问就行！我给你分享几种实用且稳妥的方案：

方案1：模板中直接通过数组索引访问 #

既然数组只有一条数据，直接用索引[0]就能定位到这条数据，再点出对应的属性即可。不过要注意空值安全，避免数组还没初始化（比如异步请求还没返回）时出现报错，推荐结合Angular的安全导航操作符?.：

组件类示例 #

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

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.html'
})
export class UserProfileComponent {
  users: User[] = [{id: 1, name: 'Jane Smith', email: 'jane@example.com'}];
  // 如果是异步数据，初始可以设为[]或者undefined
}

模板示例 #

<!-- 直接访问，带安全导航符防止空值报错 -->
<p>用户名：{{ users?.[0]?.name }}</p>
<p>邮箱：{{ users?.[0]?.email }}</p>

<!-- 也可以先判断数组是否有数据，再渲染更稳妥 -->
<div *ngIf="users && users.length > 0">
  <h3>用户信息</h3>
  <p>ID：{{ users[0].id }}</p>
  <p>姓名：{{ users[0].name }}</p>
</div>

方案2：组件类中提前提取单条数据 #

如果模板中要多次用到这条数据，或者想让模板更简洁，可以在组件初始化时直接把数组的第一条数据提取到单独的变量中：

组件类示例 #

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

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.html'
})
export class UserProfileComponent implements OnInit {
  users: User[] = [{id: 1, name: 'Jane Smith', email: 'jane@example.com'}];
  currentUser: User;

  ngOnInit() {
    // 确保数组有数据再赋值，避免undefined
    if (this.users && this.users.length > 0) {
      this.currentUser = this.users[0];
    }
  }
}

模板示例 #

<!-- 直接使用提取后的变量，同样可以加安全导航符 -->
<p>用户名：{{ currentUser?.name }}</p>
<p>邮箱：{{ currentUser?.email }}</p>

方案3：处理异步获取的数组数据 #

如果你的users数组是通过HTTP请求等异步方式获取的（比如用Observable），可以结合async管道和索引访问：

组件类示例 #

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.html'
})
export class UserProfileComponent {
  users$: Observable<User[]>;

  constructor(private userService: UserService) {
    this.users$ = this.userService.getSingleUser(); // 假设这个方法返回只含一条数据的Observable数组
  }
}

模板示例 #

<!-- 用async管道订阅Observable，再通过索引访问 -->
<p>用户名：{{ (users$ | async)?.[0]?.name }}</p>

关于可行性的回答 #

完全可行！这些方法都是Angular（Ionic 3基于Angular 5.x）官方支持的写法，而且比用*ngFor更高效——毕竟不需要循环渲染，直接定位到唯一的那条数据即可。只要注意处理空值情况，避免控制台出现报错，就可以放心使用。

内容的提问来源于stack exchange，提问作者S_R