我在 angular 中有一个 table，我想编写一个点击事件来更改被点击的单元格的值

Question

这是我制作 table

的模板

 <div class="container col-md-6 col-lg-6 container-fluid col-md-offset-3 col-lg-offset-3">
    <h1 class="page-header">
        multiplication-table    <small>angular demo</small>
    </h1>

    <table class="table table-bordered ">
        <tr *ngFor="let i of matnumbers" class="text-center ">
            <td *ngFor="let j of matnumbers" class="text-center" (click)="showmul()">
                <span  *ngIf="showItem"> {{i*j}}</span>
                <span  *ngIf="!showItem"> {{i}}x{{j}}</span>
            </td>
        </tr>
    </table>
</div>

这是组件：

export class MultiplicationTable {
 matnumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 showmul() {
    var that = this;
    this.showItem = false;

    setTimeout(function () {
        that.showItem = true;
    }, 550);
    that.showItem = false;
 }
}

不幸的是，这段代码改变了我 table 中所有单元格的跨度，我只想更改被点击的特定那个。谢谢。

Answer 1

export class MultiplicationTable {
 shownNumbers: number[] = [];
 matnumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 toggleNum(num: number) {
  var index = this.shownNumbers.indexOf(num);
  if(index != -1){
    this.shownNumbers.splice(index, 1);
  } else {
   this.shownNumbers.push(num);
  }
 }
}

在你的html

<div class="container col-md-6 col-lg-6 container-fluid col-md-offset-3 col-lg-offset-3">
<h1 class="page-header">
    multiplication-table    <small>angular demo</small>
</h1>

<table class="table table-bordered ">
    <tr *ngFor="let i of matnumbers" class="text-center ">
        <td *ngFor="let j of matnumbers" class=text-center"(click)="showmul(j)">
            <span  *ngIf="shownNumbers.indexOf(j) != -1"> {{i*j}}</span>
            <span  *ngIf="shownNumbers.indexOf(j) == -1"> {{i}}x{{j}}</span>
        </td>
    </tr>
</table>

这可能有效

Answer 2

这是html 乘法-table angular 演示

    <table class="table table-bordered ">
        <tr *ngFor="let i of matnumbers" class="text-center ">
            <td *ngFor="let j of matnumbers" class="text-center" (click)="toggleNum(i,j)">
                <span *ngIf="shownNumbers.indexOf(i*10+j) != -1"> {{i}}x{{j}}</span>
                <span *ngIf="shownNumbers.indexOf(i*10+j) == -1"> {{i*j}}</span>
            </td>
        </tr>
    </table>

这是组件

export class MultiplicationTable {
 shownNumbers: number[] = [];
 matnumbers: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 toggleNum(i: number, j: number) {
     var num = j +i* 10;
     var index = this.shownNumbers.indexOf(num);
     if (index != -1) {
         this.shownNumbers.splice(index, 1);
     } else {
         this.shownNumbers.push(num);
     }
 }
}

我在 angular 中有一个 table，我想编写一个点击事件来更改被点击的单元格的值

i have a table in angular, i want to write a click event to change the vlaue of the cell that was clicked

angularjs-directive

angular2-template