typescript - Hur man sätter standardvärdet för ett inputfält från ett annat inputfälts värde i Angular?

I Angular 2+ har jag en komponent som tar emot två indata

• totalCarsNumber

• availableCarsNumber

totalCarsNumber är obligatoriskt men availableCarsNumber är inte

Det jag letar efter är hur man ställer in standardvärdet för availableCarsNumber så att det är exakt som totalCarsNumber

Jag försökte detta men det fungerade inte:

@Input() totalCarsNumber: Number;
@Input() availableCarsNumber = this.totalCarsNumber;

Svar #1

Genom att använda egenskapsinställare i input-egenskapen kan vi upptäcka och sätta standardvärde för den

  availableCars:number = null;
  @Input() availableCarsNumber: number = null;

  //This property setter is called anytime the input property changes
  @Input() set totalCarsNumber(val: number){
    if(this.availableCarsNumber === null){
     this.availableCarsNumber = val;
    }
    this.availableCars = val;
  }

  //This getter is called when reading and displaying data
  get totalCarsNumber(){
    return this.availableCars;
  }

Jag gjorde en liten demo av det som du kan kolla på på Stackblitz

Svar #2

;TDLR Värden som skickas via Angulars @Input blir tillgängliga efter att komponenten har initierats, därför är värdet av totalCarsNumber tillgängligt i ngOnInit. Därför måste du använda ngOnInit för att implementera det.

Ett valfritt inmatningsfält måste annoteras med frågesuffix. Typen number ska skrivas med små bokstäver. Dessutom sätter vi null som standardvärde för det valfria inmatningsfältet så att vi senare kan kontrollera om det har satts.

@Input() totalCarsNumber: number;
@Input() availableCarsNumber?: number = null;

Då kan vi använda ngOnInit för att kontrollera om värdet för this.availableCarsNumber har tillhandahållits på en komponent, annars kommer det att vara null och sedan sätter vi värdet till totalCarsNumber.

ngOnInit() {
  this.availableCarsNumber = this.availableCarsNumber === null ? this.totalCarsNumber : this.availableCarsNumber;
}