Доступ к элементу подписанного массива внутри компонента

Question

У меня есть угловой проект с несколькими массивами в моем компоненте, к которым я обращаюсь напрямую из html-шаблона через привязку. Как пример, в моем компоненте у меня есть:

public materials = []

Это заполнено службой и доступно в моем шаблоне как

    <section>        
      <h3>Total Materials</h3> {{ materials[0].materials_aud | number:'1.2-2' }} 
    </section>

Это прекрасно работает, однако я выполняю вычисления для этих данных из html, и они становятся очень многословными (читай: некрасиво) и их трудно поддерживать. Я хотел бы иметь возможность доступа к этим элементам массива из моего компонента в качестве переменных и выполнять вычисления внутри компонента (или, по крайней мере, в шаблоне с использованием этих переменных), однако я не уверен, как это сделать. Новичок в изучении и понимании принципов подписки на наблюдаемые и приведения их к массиву, но не доступа к массиву после его заполнения. Кажется логичным, что как только массив получит данные, я смогу получить к ним доступ. Я попытался получить доступ к массиву через ngOnInit:

ngOnInit {
    this.materials_total = this.materials[0].materials_aud
}

но я получаю ошибку:

angular Uncaught (в обещании): TypeError: Невозможно прочитать свойство 'materials_total' из неопределенного

Любая помощь / советы приветствуются.