如何实现html表和angular 2组件之间的2路数据绑定

Question

我有一个使用* ngFor指令填充的表。用户可以点击表格中的每个单元格，并通过'contentEditable'属性编辑它的值。当前实现更新表中的数据，但不更新组件中的数据。当用户使用原生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(); 

    } 

}

Answer 1

使用时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 .... 
    }