htmlテーブルと角度2コンポーネント間の2ウェイデータバインディングを実現する方法

Question

* ngForディレクティブを使用してテーブルを作成しています。ユーザーは表内の各セルをクリックし、 'contentEditable'属性を使用して値を編集できます。現在の実装では、テーブル内のデータは更新されますが、コンポーネント内のデータは更新されません。ユーザーが角度2に固有のツールを使用してセル内のデータを変更したときに、コンポーネント内のデータを更新することは可能ですか？もしそうなら、どうですか？

これは、htmlファイルです、あなたはngModel属性を取得しないのcontentEditable = "true" を使用して

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

：これはコンポーネントである

<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> 

したがって、独自の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 .... 
    }