Невозможно прочитать свойство '0' из неопределенного в angular компоненте

Question

У меня есть вариант использования. У меня есть простой жестко запрограммированный массив в одном из сервисов angular проекта. Один из методов службы возвращает обратно жестко закодированный массив.

Нет. Я пытаюсь получить доступ к элементу массива с помощью индекса в компоненте, который внедряет эту конкретную службу. Но я получаю Не могу прочитать свойство '0' из неопределенного. Как я могу определить массив в компоненте?

Мой сервис выглядит как sample-service.service.ts:

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

@Injectable({
  providedIn: 'root'
})
export class SampleServiceService {

  constructor() { }
  user : any = [
                  {
                    fullName : 'John'
                  },
                  {
                    fullName : 'Peter'
                  }
                ];


  public get currentUserDetails() {
    return this.user;
  }
}

Мой компонент Класс выглядит следующим образом: sample.component.ts

import { Component, OnInit } from '@angular/core';
import { SampleServiceService } from '../services/sample-service.service';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  constructor(private _sampleService : SampleServiceService) { }

  username : string;

  ngOnInit(): void {
      this.username = this._sampleService.currentUserDetails.user[0].fullName;        
  }

}

Компонент HTML: sample.component. html

    <p>sample works!</p>

<h1>{{username}}</h1>

Консоль браузера выглядит следующим образом:

Заранее спасибо!

Answer 1

Используйте это так

    ngOnInit(): void {
      this.username = this._sampleService.currentUserDetails[0].fullName;
      console.log(this.username);   
  }

Answer 2

Правильный синтаксис для доступа к нему в sample.component.ts:

this.username = this._sampleService.currentUserDetails[0].fullName; 

У вас нет атрибута "user" до fullName.

Если вы хотите сохранить как вы это называете, вы можете изменить свой геттер (currentUserDetails):

get currentUserDetails() {
  return {user: this.user};
}