访问组件内已订阅数组的元素

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
}

但是我得到一个错误：

  

未捕获角度（承诺）：TypeError：无法读取属性   “ materials_total”未定义

感谢任何帮助/提示。