如何捕获表的td值并将其放入输入字段,然后单击角度7中的编辑按钮

时间:2019-10-14 18:25:10

标签: html angular typescript

我有一个表,其数据来自循环。单击编辑链接时,将打开一个框,其中包含相应的字段作为表。我需要将特定行的td值捕获到框的输入字段中,如edit功能性。对于“状态”,所有复选框均应具有选中的值,例如,如果仅绿色则选中具有绿色值的复选框,其他复选框将未被选中。这是下面的代码

home.component.html

<table>
<tr *ngFor="let user of users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td><span *ngFor="let item of user.Status;let j = index">
                    {{item.name}}
                    </span></td>
<td (click)="edit()" style="cursor:pointer">edit</td>
</tr>
</table>    
<div [hidden]="maindiv" style="background:yellow;padding:30px 10px;position:relative">
<span (click)="cross()" style="position:absolute;top:0;right:0;cursor:pointer">close</span>
<input type="text" name="id" placeholder="id"/>
<input type="text" name="name" placeholder="name"/>
<span><input type="checkbox" name="green"/>green <input type="checkbox" name="green"/>red</span>
</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonserviceService } from './../utilities/services/commonservice.service';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  getListData: any;
 dataGroup: FormGroup;
 selectedGroups: string[];
 maindiv:any = true;

  constructor(private commonserviceService: CommonserviceService) {

 }

  ngOnInit() {


  }
  users = [{
    "id": 1,
    "name": "test",
    "Status": [{
        "id": 1,
        "name": "green"
    }]
}, {
    "id": 2,
    "name": "test2",
    "Status": [{
        "id": 1,
        "name": "green"
    }, {
        "id": 2,
        "name": "red"
    }]
}];



  edit(){
      this.maindiv =  false;
  }
cross(){
    this.maindiv =  true;
}
}

1 个答案:

答案 0 :(得分:0)

您应该需要将按钮放在相同的public interface DocumentsRepository extends JpaRepository<Documents, Long> { @Query("update .....") public void updateDocument(); } 中,并通过如下所示的click函数传递Referrance变量-

td