Question

我有一个包含可编辑列的表，我只需要能够从所选行中提取值。如何获取输入值（注释）字段

component.html

     <tr *ngFor="let bsa of bsaFollowup| orderBy: key : reverse ; let i = index" (click)="GetfollowupID(bsa.ID)">
                                <td style="width:18%">{{bsa.AccessFor}}</td>

                               <td style="width:32%"><div *ngIf="i !== editRowIndex">{{bsa.Comments}}</div> <div >
<input type="text"  *ngIf="i === editRowIndex" id="comment" name="comment" [(ngModel)]="bsa.Comments"  /></div></td>
                                <td style="width:15%">

                                    <modal [rowIndex]="i" (open)="onOpen($event)"  (edit)="onEdit($event)" (cancelEdit)="onCancelEdit($event)"></modal>
                                </td>
                            </tr>
    </tr>

Component.ts

onEdit(index: number) {
        this.editRowIndex = index;
        console.log('on edit comment: ');


    }

modal.component

 @Input() rowIndex: number = -1
    @Output() open: EventEmitter<any> = new EventEmitter();
    @Output() edit: EventEmitter<any> = new EventEmitter();
    @Output() cancelEdit: EventEmitter<any> = new EventEmitter();
    showModal: boolean = true;
    onEdit() {

        this.edit.emit(this.rowIndex);
        this.showModal = false;
    }

截图

*************** ******更新******************************************* ** 组件html

<input type="text" #myInput (change)="myChange($event,i)" *ngIf="i === editRowIndex" id="comment" name="comment" [(ngModel)]="bsa.Comments"  />

event.target.value会返回新输入/修改的注释，但是，this.selectedNewBsaComment返回null component.ts

 export class DashboardComponent implements OnInit {  

 selectedNewBsaComment: any;
ChangeComments: any;

 ngOnInit(): void {
//some code
      }

onEdit(index: number) {
        this.editRowIndex = index;
        this.selectedNewBsaComment = this.bsaFollowup[index].Comments;
        console.log('selectedNewBsaComment ' + this.selectedNewBsaComment);      


    }
    myChange(event, index) {
        var comments = this.bsaFollowup[index].Comments;
        console.log('new comment ' + event.currentTarget.value);
        this.ChangeComments = event.currentTarget.value;
        console.log('new ChangeComments ' +  this.ChangeComments);
    }

}

输出：正确显示新评论

console.log（＆＃39;新评论＆＃39; + event.currentTarget.value）;

console.log（＆＃39;新的ChangeComments＆＃39; + this.ChangeComments）;

始终显示原始评论

console.log（＆＃39; selectedNewBsaComment＆＃39; + this.selectedNewBsaComment）;

Answer 1

我建议你为输入框编写一个更改并将索引作为参数传递

(change)="myChange($event,i)"

然后在更改事件中使用收到的索引获取注释的当前值

myChange(event,index){
var comments=this.bsaFollowup[index].Comments;
}

Answer 2

我添加了一个在线编辑器供您参考。 Editor Reference

您必须在更改事件中使用event.currentTarget.value才能获取值

Angular从表选定行中提取输入

2 个答案: