你应该考虑在Angular 模板中使用Type Narrowing。
在这种情况下，要么在对象中引入一个名为type的新属性，并将类型的名称作为字符串，然后添加一个条件，要么像上面的答案那样在模板中的对象内检查该属性。

解决方案1

withBalance : { balance:number, name:string, type:"withBalance" } withoutBalance : { name : string, type:"withoutBalance"}

<span>{{object.type=="withBalance"? object.balance: 0}} </span>

解决方案2

getBalance (obj:any){
    if ("balance" in obj) {
      return obj.balance
    }
    return 0;
  }

<span>
  {{ getBalance(object)}}
</span>

可选链接（?.）允许我们编写代码，如果我们遇到null或未定义，TypeScript可以立即停止运行某些表达式。因此，在您的示例中，您使用了object?.balance，这意味着如果object不为null，则尝试访问balance属性。因此，如果对象为withoutBalance类型，则会引发如下错误：Property 'balance' does not exist on type WithoutBalance .
可以在组件中使用in运算符，如下所示：

getBalance (){
    if ("balance" in this.object) {
      return this.object.balance
    }
    return 0;
  }

<span>
  {{ getBalance()}}
</span>

您可以简单地执行以下操作：

// in your data.model.ts define the type
export interface Balance {
  name: string;
  balance?: number
}

// this is where you are going to instantiate the model
const withBalance: Balance = {
  name: 'with balance',
  balance: 50
}

const balanceExample: Balance = {
  name: 'Without balance',
  // balance is optional here so you can either add it or leave it
}

// in your template
<span> {{balanceExample.balance == null ? balanceExample.balance : 0}} </span>

使用== null而不是withoutBalance是很重要的。balance？？0是因为balance是数字类型，如果您确实有一个balance，并且它的值恰好是0或1，typescript会将它转换为布尔值，因此使用== null将确保只有当balance为null或未定义时它才为true。

解决方法：

<span>{{$any(object).balance ?? 0}} </span>

这将隐藏错误。如果您确定您的模型是正确的，请使用它