7

下面是与 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);
  }

然后颜色变量将undefined作为值。

这是上述日志的控制台

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

第一个日志是当项目不包含颜色属性时，第二个是当它包含值为蓝色的属性颜色时

4

2 回答 2

13

您可以使用setter输入属性来确定它是否是有效值并将其分配给默认值

private color: string;

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

在https://stackblitz.com/edit/angular-setter-for-null-input-property创建的示例

于 2019-06-12T19:12:24.883 回答
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";
  }
});

未经测试，但它应该工作！

于 2019-06-12T19:06:48.120 回答