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 (когда свойство не существует), и совершенно очевидно, что angular помещает 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";
  }
});

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