Как установить значение ввода по умолчанию из значения другого входа в Angular?

Question

в угловых 2+ У меня есть компонент, который принимает два входа

• totalCarsNumber
• availableCarsNumber

totalCarsNumber является обязательным, однако availableCarsNumber не является

То, что я ищу, это как установить значение по умолчанию для availableCarsNumber в точности как totalCarsNumber

Я попробовал это, но это не сработало:

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

Answer 1

Используя свойство setter во входном свойстве, мы можем определить и установить для него значение по умолчанию

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

Я сделал небольшую демонстрацию этого, вы можете проверить это stackblitz

Answer 2

; значения TDLR, передаваемые через @Input в Angular, становятся доступны после инициализации компонента, следовательно, значение totalCarsNumber доступно в ngOnInit. Следовательно, вы должны использовать ngOnInit для его реализации.

Дополнительный ввод должен быть аннотирован суффиксом вопроса. Тип number должен быть в нижнем регистре. Более того, мы устанавливаем ноль в качестве значения по умолчанию для необязательного ввода, чтобы мы могли проверить его позже, если он был установлен.

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

Затем мы можем использовать ngOnInit, чтобы проверить, было ли предоставлено значение для this.availableCarsNumber для компонента, иначе оно будет нулевым, а затем мы установим значение на totalCarsNumber.

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