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

Question

I have row of inputs and dropdowns that I generate each time i click on "Add row" button. With other button I submit complete data and you can see it in console.log. as array of objects where each object is practically that row.

Currently it looks like this:

But I need it to look like this:

I use this in popup and I need to show first row immediately when popup opens and every other row should be generated after I click on "Add row" button. In the end, when I submit all, first row should be placed first in array and then rest of the generated rows.

Is there any way to alter this plunker with index, or there is some other solution?

Arrays look like this:

 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

You need to implement ngOnInit and add the properties[0] as a empty property, like this:

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

Example on this Plunkr .

Answer 2

Hey I remember your plunkr ! I believe I'm the one that corrected it actually. You should have asked on your other question !

To force a value on your selects as default, give a value to the model bound to your select. For instance, when you create a new row, set the value of your model to the first option of your selects.

Something like this.

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