Angular 从表中新创建的行获取数据

从

json

文件获取数据后，我将数据分配给组件中的数组，并使用

*ngFor

将该数组循环到表中。 现在我有了一个按钮，我使用它向表中添加一行（实际上是向与表绑定的数组中添加一个对象），其中包含空字段。这里我使用的是

组件，它将数据从空编辑为表中有意义的内容。编辑之后，我想将数据存储到组件中存在的

newAttr

对象中。但是如何将

td

的数据绑定到

newAttr

对象。这是我的密码

app.component.html

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Rank</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let d of data">
            <td><x-editable>{{d.id}}</x-editable></td>
            <td><x-editable>{{d.name}}</x-editable></td>
            <td><x-editable>{{d.rank}}</x-editable></td>
        </tr>
    </tbody>
</table>
<br>
<button (click)="addStudent()">Add A Student</button>

json（我认为不需要它，但仍然…）

您可以在子组件中使用**@Output（）**装饰
**@Output（）rowdata=neweventemitter（）；**并发出编辑数据，如下所示
**this.rowdata.emit（editdata）**
而不是在你的父对象中使用这个@Output
{{d.id}}
在geteditdata（）函数中获取子组件编辑数据，如下所示
geteditdata（editdata）{
//在这里，您可以通过唯一id绑定newAttr对象中的编辑数据
}

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    data : any = [];
    newAttr : any = [];

    constructor(private http: Http){
    }

    ngOnInit(){
        this.http.get('./assets/students.json').subscribe(data=>{
            this.data = data.json().data;
        })
    }

    addStudent(){
        this.newAttr = {id:"empty",name:"empty",rank:"empty"};
        this.data.push(this.newAttr);
        this.newAttr = {};
    }

}

{
    "data":[
        {
            "id":101,
            "name":"Andrew",
            "rank":3
        },{
            "id":102,
            "name":"Bob",
            "rank":5
        },{
            "id":103,
            "name":"James",
            "rank":1
        },{
            "id":104,
            "name":"Matthew",
            "rank":2
        },{
            "id":105,
            "name":"Kevin",
            "rank":4
        }
    ]
}

you can use **@Output()** decoration in your child component 

  **@Output() rowdata = new EventEmitter<any>();** and emit edit data like below

 **this.rowdata.emit(editdata);**

than use this @Output in your parent like 

<td><x-editable (rowdata)="geteditdata($event)">{{d.id}}</x-editable></td>

your child component edit data get in geteditdata() function like below

geteditdata(editdata){
//here you bind edit data in your newAttr object by unique id
}