@Input() variable saying object is possibly undefined in Angular-CodePudding

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

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

CodePudding user response：

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  ngIf="selected">
    <div >

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

CodePudding user response：

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>