Angular Input() принимает значение undefined после предоставления значения по умолчанию

Question

Ниже приведен входной декоратор с 3 переменными и назначенные значения по умолчанию для каждой переменной

  @Input() score: number = 0;
  @Input() text: string = 'test';
  @Input() color: string = 'red';

Вот как я передаю значения компоненту внутри ngFor.

  [text]="item.name"
  [score]="item.score"
  [color]="item.color"

Если мой объект item не содержит свойства color, тогда переменная цвета в компоненте должна принимать значение "red" в качестве значения по умолчанию.

Но когда я регистрирую это как:

ngOnInit() {
    console.log(this.score, this.text, this.color);
  }

тогда переменная цвета принимает значение undefined в качестве значения.

Вот консоль для логов выше

8 "English" undefined
6 "Spanish" "blue"

Первый журнал - это когда элемент не содержит свойства color, а второй - когда он содержит свойство color со значением blue

Answer 1

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

private color: string;

@Input('color')
set Color(color: string) {
    this.color = color || 'red';
}

Образец, созданный по адресу https://stackblitz.com/edit/angular-setter-for-null-input-property

Answer 2

Значение по умолчанию означает, что когда вы не передаете никакого значения, angular устанавливает значение по умолчанию. Но здесь вы проходите undefined (когда свойство не существует) и довольно очевидно, что угловые undefined как color переменная.

Вы можете исправить это, поместив значение по умолчанию в ваш массив первым:

let arr = [
{score:  6, text: "Spanish" color : "blue" },
{score:  8, text: "English" }
]

arr.forEach(function(item, index, theArray) {
  if(theArray[index].color == undefined){
      theArray[index].color = "red";
  }
});

Не проверено, но должно работать!

Answer 3

          ngOnInit(): void {
        this.color = this.color || 'red';
    }