@Input()变量表示对象在Angular中可能未定义

Question

我试图在html中打印对象属性数据。不幸的是，我面临的问题是，像"object"在angular中可能是未定义的。我的组件文件:

import { Component, Input, OnInit } from '@angular/core';
import { Bike } from '../bike';
@Component({
selector: 'app-bikedetails',
templateUrl: './bikedetails.component.html',
styleUrls: ['./bikedetails.component.css']
})
export class BikedetailsComponent implements OnInit {
constructor() {  }
@Input() selected? : Bike;
ngOnInit(): void {
}
}

组件html代码:

<div class="row">
<div class="col-md-12">
{{selected | json}}  // Able to see the Json data.
<h2>Bike Name : {{selected.name}}</h2>   //object is possibly undefined in Angular
<h3>Bike Company : {{selected.Company}}</h3>  ////object is possibly undefined in Angular
<h4>Top Speed : {{selected.topspeed}}</h4> //object is possibly undefined in Angular
<h4>Description : {{selected.name}}</h4>  //object is possibly undefined in Angular
</div>
</div>

没有得到为什么我得到JSON数据的原因，当我使用{{selected | JSON}} &面对的问题，当我使用它的属性{{selected.name}}。

我试过的:我试着把"已选"属性类似"未定义";和可空(!)类型，甚至通过在构造函数中初始化…

Answer 1

你特别定义输入变量可能是undefined

@Input() selected? : Bike;

问号(?)只是undefined的简写，如

@Input() selected: Bike | undefined;

很可能这也是您想要的，因为输入值可能在外部未定义。如果您100%确定组件只有使用实际输入值初始化，您可以将签名更改为

@Input() selected: Bike;

但是出于类型安全的考虑，您可以将其保留为undefined，而在模板

中捕获undefined情况

<div class="row" ngIf="selected">
<div class="col-md-12">
{{selected | json}}  // Able to see the Json data.
<h2>Bike Name : {{selected.name}}</h2>   //object is possibly undefined in Angular
<h3>Bike Company : {{selected.Company}}</h3>  ////object is possibly undefined in Angular
<h4>Top Speed : {{selected.topspeed}}</h4> //object is possibly undefined in Angular
<h4>Description : {{selected.name}}</h4>  //object is possibly undefined in Angular
</div>
</div>

或者像这样使用猫王运算符

<h2>Bike Name : {{selected?.name}}</h2>

Answer 2

尝试为@Input变量使用setter

export class BikedetailsComponent implements OnInit {
public selected: Bike;
@Input() set selected(bike: Bike) {
this.selected = bike;
}
constructor() {  }
ngOnInit(): void {
}
}

在模板中使用*ngIf，只有当selected被定义时才使用

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