Angular Input() 在提供默认值后采用未定义

Question

下面是与 3 个变量一起使用的输入装饰器，并为每个变量分配默认值

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

这就是我将值传递给 ngFor 中的组件的方式。

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

如果我的项对象不包含颜色属性，则组件中的颜色变量应将"红色">作为默认值。

但是当我将其记录为：

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

然后颜色变量将未定义作为值。

这是上述日志的控制台

8 "English" undefined
6 "Spanish" "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';
    }