NgFor 在开始时显示第一个元素 - Angular 2

Question

每次单击 "Add row" 按钮时，我都会生成一行输入和下拉菜单。使用其他按钮，我提交了完整的数据，您可以在 console.log 中看到它。作为对象数组，其中每个对象实际上就是那一行。

目前看起来是这样的：

但我需要它看起来像这样：

我在弹出窗口中使用它，我需要在弹出窗口打开时立即显示第一行，并且在我单击 "Add row" 按钮后应生成每隔一行。最后，当我提交全部时，第一行应该首先放在数组中，然后是生成的其余行。

有什么方法可以用索引改变这个plunker，或者有其他解决方案吗？

数组如下所示：

 0: {name: "A", data: "123", num: "number1", char: "letter1"}
  1: {name: "B", data: "234", num: "number2", char: "letter2"}
  2: {name: "C", data: "345", num: "number3", char: "letter3"}

Answer 1

您需要实现 ngOnInit 并将属性[0] 添加为空属性，如下所示：

ngOnInit() {
  this.properties[0] = this.property;
}

关于此的示例 Plunkr。

Answer 2

嘿，我记得你的笨蛋！我相信我是真正纠正它的人。你应该问你的其他问题！

要在您的 select 上强制设置默认值，请为绑定到您的 select 的模型指定一个值。例如，当您创建一个新行时，将模型的值设置为 select 的第一个选项。

Something like this.

createRow(){
  this.properties.push({ 
    name:"",
    data: "",
    num: this.numberTypes[0],
    char: this.charTypes[0]
  });
}

NgFor 在开始时显示第一个元素 - Angular 2

NgFor show first element on start - Angular 2

arrays

row

ngfor

angular