Question

下面是用于3个变量并为每个变量分配默认值的Input装饰器

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

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

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

如果我的项目对象不包含 color属性，则组件中的color变量应采用'red'作为默认值。

但是当我将其记录为：

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

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

这是上述日志的控制台

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

第一个日志是当项目不包含 color 属性时，第二个日志是当项目 color 属性具有值蓝色

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

默认值是指当您不传递任何值时，然后将角度值放入默认值。但是在这里，您传递的是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";
  }
});

未经测试，但应该可以使用！

提供默认值后，Angular Input（）变为未定义

2 个答案: