Angular 对象可能是'；未定义'；使用角度12

我在firebase客户端中有一个集合，其中包含

firstname

，

lastname

。。。和

余额

字段，成功显示

客户端列表

，我创建了一个函数，可以计算余额总额并将其显示在表中，但要计算余额总额的函数不起作用。这给了我错误

对象可能是“未定义的”

客户端.component.ts

export class ClientsComponent implements OnInit {
  clients !: Client[];
  total : number = 0; 

    getTotal() {
        return this.clients.reduce((total, client) => {
          return total + client.balance;
        }, 0)
      }

export interface Client{
    id? : string,
    firstname? : string,
    lastname? : string,
    email? : string,
    phone? : number,
    balance? : number
}

模块客户端.ts

export class ClientsComponent implements OnInit {
  clients !: Client[];
  total : number = 0; 

    getTotal() {
        return this.clients.reduce((total, client) => {
          return total + client.balance;
        }, 0)
      }

export interface Client{
    id? : string,
    firstname? : string,
    lastname? : string,
    email? : string,
    phone? : number,
    balance? : number
}

---

请你的问题表明你所做的任何研究（例如），以及你自己为解决这个问题所做的任何尝试。@HereticMonkey我已经试过了，但我找不到一个好的答案。这只是逻辑而已。看看它抛出错误的那一行，看看有什么是未定义的。例如，如果它位于

client.balance

，请注意，您已将该属性定义为可选属性（

balance？：number

），因此它可能未定义。如果是这种情况，请提供默认值，或者不要将其定义为可选值。@HereticMonkey thx其工作原理很好，请记住这不是一个安全代码。感叹号是一个非空断言运算符，它在开发期间只是一个TypeScript辅助工具，但不会以任何方式保护编译后的代码不受空/未定义的影响。因此，我建议初始化数组

clients:Client[]=[]

。