Angular中@Input()变量访问属性时报object is possibly undefined错误如何解决

报错原因 #

你在TS中给@Input() selected加了可选修饰符?，开启TypeScript严格类型检查后，编译器会判定该变量可能为undefined：

• JsonPipe内部内置了空值兼容逻辑，输入为undefined时会直接输出"undefined"字符串，不会触发运行时和编译报错
• 直接访问selected.name时，编译器会判定如果selected为undefined时访问属性会抛出运行时错误，因此提前抛出类型报错

可行解决方案 #

1. 使用可选链操作符（最简单适配） #

直接在模板中访问属性时添加可选链?.，当selected为undefined时会直接返回空值，不会触发报错：

<h2>Bike Name : {{selected?.name}}</h2>
<h3>Bike Company : {{selected?.Company}}</h3>
<h4>Top Speed : {{selected?.topspeed}}</h4>
<h4>Description : {{selected?.name}}</h4>

2. 用*ngIf做守卫渲染 #

如果只有selected有值时才需要展示该区块，直接在外层添加*ngIf判断，同时可以用as别名简化后续调用：

<div class="row" *ngIf="selected as selectedBike">
    <div class="col-md-12">
        {{selectedBike | json}}
        <h2>Bike Name : {{selectedBike.name}}</h2>
        <h3>Bike Company : {{selectedBike.Company}}</h3>
        <h4>Top Speed : {{selectedBike.topspeed}}</h4>
        <h4>Description : {{selectedBike.name}}</h4>
    </div>
</div>

这种方式可以避免在多个属性访问处重复添加可选链，同时没有值时整个区块不会渲染，更符合业务逻辑。

3. 确定Input必传时调整类型定义 #

如果你能保证父组件一定会传入有效值，不会出现undefined的情况，可以去掉可选修饰符，同时设置默认值或者添加非空断言：

// 方式1：设置默认空对象
@Input() selected: Bike = {} as Bike;

// 方式2：明确声明该属性一定会被赋值，跳过类型检查
@Input() selected!: Bike;

这种方式需要确保父组件调用时一定传值，否则运行时可能出现属性访问报错。

内容的提问来源于stack exchange，提问作者Srikanth Reddy