Angular中无法通过服务初始化属性，报错：Cannot read property '0' of undefined

问题分析 #

你提供的组件、服务、模块代码本身逻辑无明显错误，但报错提示Cannot read property '0' of undefined，结合直接给product赋值字符串就能正常运行的现象，问题大概率出在products.component.html模板文件中：模板里可能存在尝试读取product的索引（比如{{ product[0] }}）或者用*ngFor遍历product的代码，但你的服务返回的是字符串类型，不是数组，当服务注入初始化的时机稍晚时，模板渲染阶段product还未被赋值，就会触发该错误；而直接在构造函数赋值字符串时，初始化时机更早，模板渲染时已有值，所以不会报错。

另外，当前代码存在两个不规范的地方，也可能间接引发问题：

• ProductService未添加@Injectable装饰器，不符合Angular服务的规范写法
• 在构造函数中执行业务初始化逻辑，Angular推荐将初始化逻辑放在ngOnInit钩子中

解决步骤 #

1. 修正模板文件 #

打开products.component.html，检查是否有以下类似代码：

<!-- 错误示例：尝试读取字符串的索引 -->
{{ product[0] }}

<!-- 或错误示例：用*ngFor遍历字符串（虽Angular允许，但product未初始化时会报错） -->
<div *ngFor="let char of product">{{ char }}</div>

如果是要显示完整字符串，直接改为：

{{ product }}

如果确实需要处理数组，需修改服务的返回值为数组类型，同时调整组件中product的类型定义。

2. 完善ProductService的规范写法 #

在product.service.ts中添加@Injectable装饰器，推荐使用providedIn: 'root'实现根注入，这样可以不用在模块的providers数组中注册：

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

@Injectable({
  providedIn: 'root'
})
export class ProductService{
    getProduct() : string {
      return "Learning Angular";
    }
}

之后可以从app.module.ts的providers数组中移除ProductService。

3. 将初始化逻辑移至ngOnInit钩子 #

修改products.component.ts，把服务调用移到ngOnInit中，符合Angular的生命周期规范：

import { Component, OnInit } from '@angular/core';
import { ProductService } from './product.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
  product: string;

  constructor(private productService: ProductService){
    // 构造函数仅用于注入依赖
  }
 
  ngOnInit(): void {
    this.product = this.productService.getProduct();
  }
}

注意这里给注入的服务添加了private修饰符，可直接通过this.productService访问，无需额外声明变量。

验证 #

完成以上修改后，重新启动项目，错误应该会消失，组件能正常通过服务初始化product属性并在模板中显示。

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