如何实现html表和angular 2组件之间的2路数据绑定
问题描述:
我有一个使用* ngFor指令填充的表。用户可以点击表格中的每个单元格,并通过'contentEditable'属性编辑它的值。当前实现更新表中的数据,但不更新组件中的数据。当用户使用原生2角度的工具更改单元格中的数据时,是否可以更新组件中的数据?如果是这样,怎么样?如何实现html表和angular 2组件之间的2路数据绑定
这是HTML文件:
<table id="data-table" class="table table-striped">
<thead>
<tr>
<th *ngFor="let round of rounds">{{ round.title }}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let player of players">
<td contenteditable="true">{{ player.name }}</td>
<td contenteditable="true">{{ player.round1 }}</td>
<td contenteditable="true">{{ player.round2 }}</td>
<td contenteditable="true">{{ player.round3 }}</td>
</tr>
</tbody>
</table>
这是组件:
import { Component, OnInit } from '@angular/core';
import { BooksAndRunService } from '../books_and_run.service';
@Component({
moduleId: module.id,
selector: 'books-and-run-play',
templateUrl: './books_and_run_play.component.html',
styleUrls: ['./books_and_run_play.component.css'],
})
export class BooksAndRunPlayComponent implements OnInit {
constructor(private booksAndRunService: BooksAndRunService) { }
currentRound = 1;
rounds = [
{title: ""},
{title: "Round 1"},
{title: "Round 2"},
{title: "Round 3"},
{title: "Round 4"},
{title: "Round 5"},
{title: "Round 6"},
{title: "Round 7"},
]
players = [
{
name: "Bob",
round1: 0,
round2: 0,
round3: 0,
round4: 0,
round5: 0,
round6: 0,
round7: 0,
},
{
name: "Joe",
round1: 0,
round2: 0,
round3: 0,
round4: 0,
round5: 0,
round6: 0,
round7: 0,
},
{
name: "Jim",
round1: 0,
round2: 0,
round3: 0,
round4: 0,
round5: 0,
round6: 0,
round7: 0,
},
{
name: "Sarah",
round1: 0,
round2: 0,
round3: 0,
round4: 0,
round5: 0,
round6: 0,
round7: 0,
},
{
name: "Jane",
round1: 0,
round2: 0,
round3: 0,
round4: 0,
round5: 0,
round6: 0,
round7: 0,
},
{
name: "Jill",
round1: 0,
round2: 0,
round3: 0,
round4: 0,
round5: 0,
round6: 0,
round7: 0,
},
];
ngOnInit(): void {
// this.players = this.booksAndRunService.getPlayers();
}
}
答
使用时CONTENTEDITABLE = “真”,你没有得到ngModel属性,因此您需要创建自己的2路数据绑定,如下所示:
<td contenteditable="true" [textContent]="player.name" (input)="player.name = $event.target.textContent"></td>
或者,你可以做到这一点
<td contenteditable="true" [textContent]="player.name" (input)="onContentChanged($event)"></td>
,然后在你的组件类
onContentChanged(event : Event)
{
let playerName : string = event.target.textContent;
.... Do stuff here ....
}
真棒这个作品,谢谢!只是好奇,这是否在表中的每个单元格上创建一个事件监听器? – FlashBanistan
是的,如果您想要使用2路数据绑定,您必须为使用contenteditable =“true”的每个元素执行此操作。所以是的,当ngFor完成后,你将最终得到每个元素的事件监听器,但这应该不成问题。只要小心一点,不要误认为你正在调用的对象的属性,这就是全部:) – Lys