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

Question

I'm trying to print the object properties data in html. Unfortunately I'm facing the issue saying as like "object is possibly undefined in Angular". My component ts file :

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 {
  }

}

My component html code :

<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>

Not getting the reasons why I'm getting the JSON data when I use {{selected |json}} & facing issue when I use it's properties {{selected.name}}.

What I tried : I tried by making the "selected" property as like "undefined" and nullable(!) type and even by initializing in constructor...

Answer 1

You specifically defined the input variable to be possibly undefined .

@Input() selected? : Bike;

The questionmark ( ? ) is just a shorthand for undefined , as in

@Input() selected: Bike | undefined;

Most likely that's also what you want, as possibly the input value may be undefined on the outside. If you are 100% sure the component is only initialized with an actual input value, you may change your signature to

@Input() selected: Bike;

but for the sake of type-safety, you can keep it possibly undefined and instead catch the undefined case in your template

<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>

or use the elvis operator like so

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

Answer 2

Try using a setter for the @Input variable.

export class BikedetailsComponent implements OnInit {
  public selected: Bike;

  @Input() set selected(bike: Bike) {
    this.selected = bike;
  }

  constructor() {  }

  ngOnInit(): void {
  }
}

And use *ngIf in the template to use the selected only if it's defined

<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>